## Colourways

### Neutral

`background`

`background-box`

`gradient-from`

`gradient-to`

`border-extra-light`

`border-light`

`border`

`border-dark`

`border-extra-dark`

`text-visual-de-emphasis`

`text`

### Accent

`highlight-box`

`strong-highlight-box`

`highlight`

### Interaction

`selected`

`selecting`

`link-focus`

`link-hover`

`link`

### State

`success-background`

`success-text`

`warning-background`

`warning-text`

`error-background`

`error-text`

`info-background`

`info-text`

## Responsive grid

Grid layout with 1 to 4 column options.

### Current active breakpoint

1. No breakpoint
2. Breakpoint 1
3. Breakpoint 2
4. Breakpoint 3

### Main layout grid

###### Opt1: 1col

###### Opt2: 2col cell1

###### Opt2: 2col cell2

###### Opt3: 3col cell1

###### Opt3: 3col cell2

###### Opt3: 3col cell3

###### Opt4: 3col cell1and2

###### Opt4: 3col cell3

###### Opt5: 3col cell1

###### Opt5: 3col cell2and3

###### Opt6: 4col cell1

###### Opt6: 4col cell2

###### Opt6: 4col cell3

###### Opt6: 4col cell4

###### Opt7: 4col cell1and2

###### Opt7: 4col cell3

###### Opt7: 4col cell4

###### Opt8: 4col cell1

###### Opt8: 4col cell2and3

###### Opt8: 4col cell4

###### Opt9: 4col cell1

###### Opt9: 4col cell2

###### Opt9: 4col cell3and4

###### Opt10: 4col cell1and2and3

###### Opt10: 4col cell4

###### Opt11: 4col cell1

###### Opt11: 4col cell2and3and4

## Typography

# h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1

## h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2

### h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3

#### h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4 h4 Heading 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

This text has a reference in the footnote1.

1 Here is the footnote.

### Contact details

Uses both the Schema.org and hCard microformats.

Organization Name

Telephone 01234 456789

Mobile 07900 123456

Email anon@example.com

### Text ranged left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

### Text ranged right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

### Text centred

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

### Text justified

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

## Inline text-level semantics

### Anchor

Code:

`<a>`

Example:

The a element example

### Abbreviation

Code:

`<abbr>`

Example:

The abbr element and abbr element with title examples

### Bold

Code:

`<b>`

Example:

The non-semantic b element example

### Citation

Code:

`<cite>`

Example:

The cite element example

### Code

Code:

`<code>`

Example:

The `code element` example

### Deleted

Code:

`<del>`

Example:

The del element example

### Definition

Code:

`<dfn>`

Example:

The dfn element and dfn element with title examples

### Emphasis

Code:

`<em>`

Example:

The em element example

### Italic

Code:

`<i>`

Example:

The non-semantic i element example

### Inserted

Code:

`<ins>`

Example:

The ins element example

### Keyboard Input

Code:

`<kbd>`

Example:

The `kbd element` example

### Mark

Code:

`<mark>`

Example:

The mark element example

### Quote

Code:

`<q>`

Example:

The q element inside a q element

### Strikethrough

Code:

`<s>`

Example:

The s element example

### Sample

Code:

`<samp>`

Example:

The `samp element` example

### Small

Code:

`<small>`

Example:

The small element example

### Strong

Code:

`<strong>`

Example:

The strong element example

### Subscript

Code:

`<sub>`

Example:

The sub element example

### Superscript

Code:

`<sup>`

Example:

The sup element example

### Underline

Code:

`<u>`

Example:

The u element example

### Variable

Code:

`<var>`

Example:

The var element example

## Block text-level semantics

### Pre-formatted text blocks

    This is an example of a non-code
        pre-formatted text block
            preserving white spaces

### Pre-formatted code blocks

    <section class="alert alert-error fade in" role="alert">
        <a class="close" data-dismiss="alert">&amp;times;</a>
        <h3>Message pane</h3>
        <p>Error message goes here.</p>
    </section>

### Pre-formatted code blocks with line numbers

    <section class="alert alert-error fade in" role="alert">
        <a class="close" data-dismiss="alert">&amp;times;</a>
        <h3>Message pane</h3>
        <p>Error message goes here.</p>
    </section>

### Blockquotes

> Here is an example of a block quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

### Examples (no semantics implied)

Code:

`<p class="example">`

Example:

An example paragraph for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Thematic break (hr tag)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.

Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

## Embedded content

### Images

### Images with links

### Rounded images

### Circular images

### Figures

Figcaption content

### Left ranged image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

### Right ranged image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

### Centred image

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

## Inline text labels

### Safe

`class="success"`

This is an example of a span success label and a strong success label.

### Warning

`class="warning"`

This is an example of a span warning label and a strong warning label.

### Danger

`class="error"`

This is an example of a span error label and a strong error label.

### Information (no semantic meaning)

`class="information"`

This is an example of a span information label and a strong information label.

## Alert boxes

### System message: success

`<p class="alert-block success">`

Success: a suitable success message goes here.

### System message: warning

`<p class="alert-block warning">`

Warning: a suitable warning message goes here.

### System message: error

`<p class="alert-block error">`

Error: a suitable error message goes here.

### System message: information (no semantic meaning)

`<p class="alert-block information">`

Information: a suitable information message goes here.

## Pill boxes

### Pill message: success

`<small class="alert-block alert-pill success">Latest</small>`

Latest

### Pill message: warning

`<small class="alert-block alert-pill warning">Prelease</small>`

Prelease

### Pill message: error

`<small class="alert-block alert-pill error">Obsolete</small>`

Obsolete

### Pill message: information (no semantic meaning)

`<small class="alert-block alert-pill information">Deprecated</small>`

Deprecated

## Pagination

## Breadcrumbs

## Lists

### Ordered

Code:

`<ol>`

Example:

1. this is an example
2. of a numbered
3. (ordered) list
   1. and a second level
   2. numbered list example

### Unordered

Code:

`<ul>`

Example:

- this is an example
- of a bulletpoint
- (unordered) list
  - and a second level
  - bulletpoint list example

### Plain

Code:

`<ul class="list--no-bullets">`

Example:

- this is an example
- of a plain
- (unstyled) list
  - and a second level
  - bulletpoint list example

### Files

Code:

`<ul class="list--files">`

Example:

- parent_directory
  - child_directory1
  - ...
  - child_directory4
    - file1.ext
    - file2.ext
    - image1.png
  - ...

### Description

Code:

`<dl>`

Example:

This is a definition list term 1
  Definition of term 1 here
  Another definition of term 1
  A sub term
    With
    Subs

## Tables

### Plain table

Simple table (without `<thead>`, `<tfoot>` tags)

Primary | Secondary | Tertiary
--- | --- | ---
Roast duck | Seasonal vegetables | New potatoes
Grilled lobster | Mixed seafood | Side salad
Chicken dinosaurs | Baked beans | Waffles

### Full Table

Full-feautured table with `scope`, `rowspan` `colspan` attributes, and `<caption>`, `<colgroup>`, `<thead>`, `<tfoot>`, `<tbody>` tags included

This is a table caption
Sector | Planet | Government | Population
--- | --- | --- | ---
Alpha | Diso | Democracy | 4.137 B
Lave | Dictatorship | 2.5 B
Leesti | Corporate State | 5.01 B
Beta | Reorte | Dictatorship | 3.119 B
Zaonce | Corporate State | 5.3 B
This is the tfoot

## Forms

### Inputs

Test checkbox 1 Test checkbox 2 Test checkbox 3 (disabled) Test checkbox 4 (disabled checked)

Test radio 1 Test radio 2 Test radio 3 (disabled)

Inline form elements

Inline form elements (disabled)

File upload

Select multiple

Textarea

Colour

Date

Datetime local

Email

Month

Number

Password

Search

Tel (phone)

Text ●

Text with data list

Time

URL

Week

### Form Groups

Fieldset legend

Yes No Maybe

### Buttons

Link tag Span tag (disabled)

Primary link tag

Large button Small button

## Cards

### Text-only cards/article tiles

### Card with default text

No card header or footer. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card link

Header content

### Card with centred text

Also has a card header and footer. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Go somewhere

NEW

### Card with aligned right text

Also has a card footer and alert pill. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Text and image cards/article tiles

FEATURED

### Card with default text

No card header or footer, also has alert pill. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

FEATURED

Header content

### Card with centred text

Also has a card header, footer and alert pill. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Go somewhere small

### Card with default text

Also has a card footer. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card link

## Social media

- Twitter
- GitHub