Optional content
Very simple List navigation

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item A

  This is a list item and there is a status set to indicate something important.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

# Page Title

Optional subline
Edit Link Delete Link

# This is a demo

featuring a various number of patterns to demonstrate the theming abilities of the current version of the css framework.

Label and icon are optional
Disabled switch button
Option 01 Optional description text for option 01.
Option 04 Optional description text for option 04.
Option 05 Optional description text for option 05.
Alternative checkbox title
Optional label for group of checkboxes
Duis tincitunt sagittis

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.

Alternative radio button title
Optional label for group of radio buttons
Duis tincitunt sagittis

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.

Dolor sit amet

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim.
Aenean viverra massa sit amet
Duis tincitunt sagittis.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Collapsable non-collapsed container

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

First name | Last name | E-Mail
--- | --- | ---
Roland | May Frontend developer | rolandmay@yoveo.foo
Mark | Ross Scrum master | mark.ross@skivee.foo
Melissa | Anton Frontend key developer | m.anton@grkeo.foo
Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo
Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo

- #### List item title

  Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
  Meta Information
  123

- #### List item title

  Congue eu consequat ac felis donec et odio.
  Meta Information
  123

### Card title, icon suppressed

A short subline.

of cards Lorem ipsum dolor content of cards.

### Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut faucibus pulvinar elementum integer. of cards Lorem ipsum dolor content of cards.

### Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut faucibus pulvinar elementum integer. of cards Lorem ipsum dolor content of cards.

### Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut faucibus pulvinar elementum integer. of cards Lorem ipsum dolor content of cards.

### Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut faucibus pulvinar elementum integer. of cards Lorem ipsum dolor content of cards.

### Card title, icon suppressed

A short subline.

of cards Lorem ipsum dolor content of cards.

### (Centered) Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.

of cards Lorem ipsum dolor content of cards.

### Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.

of cards Lorem ipsum dolor content of cards.

### Secondary tab

Example of a left aligned horizontal secondary tab without icon.

### Primary tab

Example of a left aligned horizontal primary tab.

### This is the content of a tab item without icon.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit et magna in auctor. Etiam at massa at ipsum rutrum imperdiet et sollicitudin orci. Phasellus laoreet lacinia enim eu pellentesque.

# Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

## Your device is not onboarded

Go to your local device to upload an onboarding key
Upload key

# Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

## Your device is not onboarded

Go to your local device to upload an onboarding key
Upload key

# Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

## Form validation title

This is an example explanation for form validation.

# Validation

There are some problems with your input. Please correct them below.
Name
Enter at least 8 characters.
Please enter a valid name.
Second Name
Enter at least 8 characters.
ZIP code
Enter digits.
City
Enter at least one character.
Country
Select a country.
Please enter a valid ZIP code. Please enter a valid country.
Feedback
Enter at least one sentence.
Please enter a valid feedback.
Gender
Female Optional description text for female option.
Male Optional description.
Select one option.
Register account for
Insights Hub Get access to Insights Hub.
User Experience Toolkit Check for markup and styles.
Newsletter Know what's new.
Select at least one option.
Please choose a gender. Please choose at least one register option.
* Required fields

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .

#### Lorem ipsum

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#### Another notification with a very long title that will break in more lines

Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.
Show details
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

#### Lorem ipsum

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.
Show details
Lorem ipsum dolor sit amet following measurements show the dimensions for this component: A notification has a maximal width of 320px.

#### Lorem ipsum

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Show details
Lorem ipsum dolor sit amet following measurements show the dimensions for this component: A notification has a maximal width of 320px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.

Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros.

# Lorem ipsum

Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.