Ghost link button Ghost link button, disabled


Some other title Some title


Some other title Some title
Primary content action link Primary content action link, disabled


Primary link button Primary link button, disabled w. class

Secondary link button Secondary link button, disabled
Optional description text for group of checkboxes.
Fieldset title
Here goes the form content in a native fieldset.
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.
Lorem ipsum dolor sit amet, this is a link element. 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.
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
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
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
First name Last name E-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.name
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
This is a div styled as a subheadline

This is a headline of first order

This is a div styled as headline of first order

This is a headline of second order

This is a div styled as headline of second order

This is a headline of third order

This is a div styled as headline of third order

This is a headline of fourth order

This is a div styled as headline of fourth order
This is a headline of fifth order
This is a div styled as headline of fifth order
This is a headline of sixth order
This is a div styled as headline of sixth order

  1. 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.
  2. List Item 2
    1. Nested List Item
    2. Nested List Item
      breaking / wrapping into a new line
    3. Nested List Item
  3. List Item 4
  4. List Item 5
  5. List Item 6; this item has so much text
    that it breaks into a new line
  6. 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
Usergroup: FancyUser User type: Global User mdsp:core:StandardUser Users 123
Primary link button, disabled 321

Page Title

Sub headline Tag Additional Information

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.

Page Title

Subline Tag Additional Information

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.

This is a fieldset title
Optional description.
Optional description.
Optional description.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.

Form validation title

This is an example explanation for form validation.

Validation

There are some problems with your input. Please correct them below.
Enter at least 8 characters.
Enter at least 8 characters.
Enter digits.
Enter at least one character.
Select a country.
Enter at least one sentence.
Select one option.
Select at least one option.
* Required fields

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:

  1. Eirmod tempor invidunt ut labore.
  2. Et dolore magna aliquyam erat, sed diam voluptua.
  3. 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:

  1. Eirmod tempor invidunt ut labore.
  2. Et dolore magna aliquyam erat, sed diam voluptua.
  3. 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.

Message with a link in content width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Message with a button, icon in content 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 content width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam. Stet clita kasd gubergren.
At vero eos et accusam et justo duo dolores et ea rebum.

Message with icon, an ordered list in content width

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:

Message with an ordered list, a link, a button in content 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.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

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.

Message with a link and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with a link, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message with link

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small message with icon
Small message with icon
Small message with icon
Small message with icon
Small message with icon
Small message with icon in full width
Small message with icon in full width
Small message with icon in full width
Small message with icon in full width
Small message with icon in full width
Small message
Small message
Small message
Small message
Small message
Small message in full width
Small message in full width
Small message in full width
Small message in full width
Small message in full width
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.
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 - 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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.has-bgColor-white
.has-bgColor-gray100
.has-bgColor-gray200
.has-bgColor-gray250
.has-bgColor-gray400
.has-bgColor-gray800
.has-bgColor-functionalRed
.has-bgColor-validationRed
.has-bgColor-functionalYellow
.has-bgColor-functionalGreen
.has-bgColor-coolBlue
.has-bgColor-stateBlue
.has-bgColor-stateBlue050
.has-bgColor-stateBlue100
.has-bgColor-stateBlue250
.has-bgColor-contextBlue050
.has-bgColor-contextBlue150
.has-bgColor-contextBlue600
.has-bgColor-contextGreen050
.has-bgColor-contextGreen200
.has-bgColor-contextGreen600
.has-bgColor-contextRed
.has-bgColor-contextRed200
.has-bgColor-contextRed500
.has-bgColor-contextYellow
.has-bgColor-contextYellow100
.has-bgColor-contextYellow600
.has-bgColor-firefly
.has-bgColor-aquaHaze
.has-bgColor-accentTealLight
.has-bgColor-petrol
.has-bgColor-petrolDynamic
.has-bgColor-stoneDark
.has-bgColor-stoneLight
.has-bgColor-stoneLight35
.has-bgColor-sandDark
.has-bgColor-sandLight
.has-bgColor-sandLight35
.has-bgColor-accentTealDark
.has-bgColor-accentTealLight
.has-bgColor-accentBlueDark
.has-bgColor-accentBlueLight
.has-bgColor-accentYellowDark
.has-bgColor-accentYellowLight
.has-bgColor-accentRedDark
.has-bgColor-accentRedLight
.has-bgColor-accentGreenDark
.has-bgColor-accentGreenLight
.has-borderColor-white
.has-borderColor-gray100
.has-borderColor-gray200
.has-borderColor-gray250
.has-borderColor-gray400
.has-borderColor-gray800
.has-borderColor-functionalRed
.has-borderColor-validationRed
.has-borderColor-functionalYellow
.has-borderColor-functionalGreen
.has-borderColor-coolBlue
.has-borderColor-stateBlue
.has-borderColor-stateBlue050
.has-borderColor-stateBlue100
.has-borderColor-stateBlue250
.has-borderColor-contextBlue050
.has-borderColor-contextBlue150
.has-borderColor-contextBlue600
.has-borderColor-contextGreen050
.has-borderColor-contextGreen200
.has-borderColor-contextGreen600
.has-borderColor-contextRed
.has-borderColor-contextRed200
.has-borderColor-contextRed500
.has-borderColor-contextYellow
.has-borderColor-contextYellow100
.has-borderColor-contextYellow600
.has-borderColor-firefly
.has-borderColor-aquaHaze
.has-borderColor-accentTealLight
.has-borderColor-petrol
.has-borderColor-stoneDark
.has-borderColor-stoneLight
.has-borderColor-stoneLight35
.has-borderColor-sandDark
.has-borderColor-sandLight
.has-borderColor-sandLight35
.has-borderColor-accentTealDark
.has-borderColor-accentTealLight
.has-borderColor-accentBlueDark
.has-borderColor-accentBlueLight
.has-borderColor-accentYellowDark
.has-borderColor-accentYellowLight
.has-borderColor-accentRedDark
.has-borderColor-accentRedLight
.has-borderColor-accentGreenDark
.has-borderColor-accentGreenLight
.has-color-white
.has-color-gray100
.has-color-gray200
.has-color-gray250
.has-color-gray400
.has-color-gray800
.has-color-functionalRed
.has-color-validationRed
.has-color-functionalYellow
.has-color-functionalGreen
.has-color-coolBlue
.has-color-stateBlue
.has-color-stateBlue050
.has-color-stateBlue100
.has-color-stateBlue250
.has-color-contextBlue050
.has-color-contextBlue150
.has-color-contextBlue600
.has-color-contextGreen050
.has-color-contextGreen200
.has-color-contextGreen600
.has-color-contextRed
.has-color-contextRed200
.has-color-contextRed500
.has-color-contextYellow
.has-color-contextYellow100
.has-color-contextYellow600
.has-color-firefly
.has-color-aquaHaze
.has-color-accentTealLight
.has-color-petrol
.has-color-stoneDark
.has-color-stoneLight
.has-color-stoneLight35
.has-color-sandDark
.has-color-sandLight
.has-color-sandLight35
.has-color-accentTealDark
.has-color-accentTealLight
.has-color-accentBlueDark
.has-color-accentBlueLight
.has-color-accentYellowDark
.has-color-accentYellowLight
.has-color-accentRedDark
.has-color-accentRedLight
.has-color-accentGreenDark
.has-color-accentGreenLight