Themes
Description
Modify an element with one of the below theme utility classes to update the background colour of a section using colours defined in our colour palette (see: rules/colors):
Usage
Usage example
Background theme colours
Check out the different background colors.
Variations
The variations are modifier classes that can be applied on the default element.
u-theme-default
get-color(white)
Background theme colours
Check out the different background colors.
u-theme-contrast
get-color(grey, 4x-light)
Background theme colours
Check out the different background colors.
u-theme-accent
get-color(orange, 2x-light)
Background theme colours
Check out the different background colors.
u-theme-action
get-color(blue, 2x-light)
Background theme colours
Check out the different background colors.
u-theme-brand
get-color(purple)
Background theme colours
Check out the different background colors.
u-theme-brand-light
get-color(purple, 3x-light)
Background theme colours
Check out the different background colors.
u-theme-impact
get-color(grey, contrast)
Background theme colours
Check out the different background colors.
u-theme-green
get-color(green, 2x-light)
Background theme colours
Check out the different background colors.
Code example
<div class="u-theme-[purpose] ">
<p>Background theme colours</p>
<p>Check out the different background colors.</p>
</div>