Backgrounds
Element backgrounds can be painted in a number of colors. Some are purely for visual effect, while others are meant to convey a meaning.
Single-colored Backgrounds
There is a set of predefined colors that you can pick from when styling your element. In addition to the company CI colors and the four signal colors for status reports (confirm, info, etc.), there are some plain colors that are free to use for contrast, focus, or any other application.
All background classes start with the prefix background-, followed by a color (e.g. “white”)
or use case (e.g. “warning”).
(Padding added for demonstrational purposes)
<div class="background-darkblue">
Dark-blue background
</div>
Colors
These are the colors you can use.
Plain Colors
- White
-
background-white - Light gray
-
background-lightgray - Dark gray
-
background-darkgray - Light blue
-
background-lightblue - Dark blue
-
background-darkblue
Status Information
- Confirmation
-
background-confirm - Information
-
background-info - Warning
-
background-warning - Error
-
background-error
CI Colors
- Brand orange
-
background-brandorange - Brand blue
-
background-brandblue
Gradients
There are two gradients defined in the standard set, both fading from a light blue to white.
-
The standard gradient (
background-gradient) fades out to white at 100 pixels above the bottom edge of the element. -
The full gradient (
background-gradient-full) runs all the way from the bottom edge to the top edge and is used for small elements, such as tabs or bars.
(Borders and heights added for demonstrational purposes)
<div class="background-gradient">
<p>Standard gradient</p>
</div>
Standard gradient
<div class="background-gradient-full">
<p>Top-to-bottom gradient for small elements</p>
</div>
Top-to-bottom gradient for small elements