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”).

Element with Single-colored Background
(Padding added for demonstrational purposes)
<div class="background-darkblue">
    Dark-blue background
</div>
Dark-blue background

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.
Elements with Gradient Backgrounds
(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