For background colors, apply the following class to a section or a container:
We use simple naming conventions for applying theme colors via CSS class names. Simply use the lowercased, hyphenated name of the color from the Color Palette section, and an applicable prefix. See below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-teal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-dark-blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-red
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-green
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-light-orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-dark-gray
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-gray
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-light-gray
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-smoke
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .text-white
Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated. You can use labels inline in text by wrapping the text in a SPAN, or place them as stand-alone content by using a TEXT BLOCK component. In either scenario, use the .label class, optionally in combination with a .bg-* class to colorize.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Overlays provide a semi-transparent background in the appropriate theme color. This effect is achieved using two nested containers/components. The parent container is assigned the appropriate .bg-image-* class, and the child container is assigned the appropriate .bg-overlay-* class. Below this technique is demonstrated on COLUMN components, but this can be used on a SECTION or even just the DIV component.