Optional description text for group of checkboxes.
Fieldset title
Here goes the form content for this fieldset with fieldset class.
Optional description text for a group of radio buttons.
Optional description text.
Optional description text.
Optional description text.
Optional description text.
Text input description.
Required text input description.
Text input description: in this case the description is very, very long and more than one line of text with a link inside. This example should give you a preview of how this should look like.
Read-only text input description.
Disabled text input description.
Focused text input description text.
Text input description for text input of type 'number'.
Text input description for text input of type 'password'.
Optional description for textarea with placeholder.
Optional description for required textarea with placeholder.
Optional description for readonly textarea with value.
Optional description for disabled textarea with value.
This is a text in an em element. 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.
This is a text in a div styled as an em element. 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.
This is a text in a div styled as an em element. 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.
This is a text in a mark element. 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.
This is a text in a div styled as a mark element. 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.
This is a text in a small element. 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.
This is a text in a div styled as a small element. 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.
This is a text in a strong element. 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.
This is a text in a div styled as a strong element. 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.
This is a text in a div styled as a strong element. 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.
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.
List Item 2
List Item 3
Nested List Item with a very long line which breaks/wraps into a new line
Nested List Item
Nested List Item
List Item 4
List Item 5
List Item 6, this breaks into a new line
List Item 7
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.
List Item 2
Nested List Item
Nested List Item breaking / wrapping into a new line
Nested List Item
List Item 4
List Item 5
List Item 6; this item has so much text that it breaks into a new line
List Item 7
Definition List: Term
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.
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.
Definition List: Term
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.
Definition List inline: Term
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.
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.
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.
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.
Definition List inline: Term
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.
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.
This is a paragraph element. 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.
This is a div styled as a paragraph element. 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.
This is a small paragraph element. 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.
This is a div styled as a small paragraph element. 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.
User group: FancyUser
User type: Global User
mdsp:core:StandardUser
Users
123
Admin User Group
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.
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.
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.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Big message
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Message with a button, icon in full width
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tempor invidunt ut labore et dolore magna aliquyam erat.
Message with a link, a button in full width
Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam. Stet clita kasd gubergren, no sea takimata.
At vero eos et accusam et justo duo dolores et ea rebum.
Message with icon, an ordered list in full width
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Message with an ordered list, a link, a button in full width
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr vero eos et accusam.
This is the content of a tab item with 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.
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.
Frameless primary tab with icon
Example of a left aligned horizontal primary tab with icon.
Primary tab with icon
Example of a left aligned horizontal primary tab with icon.
Primary tab
Example of a left aligned horizontal primary tab.
Secondary tab
Example of a left aligned horizontal secondary tab without icon.
Compact list - debug
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
List item title
Meta Information width a lot of textual information so the row gets higher. Meta Information width a lot of textual information so the row gets higher.Meta Information width a lot of textual information so the row gets higher.
123
Lorem ipsum
List item title
Congue eu consequat ac felis donec et odio.
Meta Information
123
Lorem ipsum
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
Compact list
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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
List - debug
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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, congue eu consequat ac felis donec et odio.
Meta Information
123
List item title
Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
Meta Information
123
List
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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, congue eu consequat ac felis donec et odio.
Meta Information
123
List item title
Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.