ImmobilienScout24

core.css v0.3.0 – Documentation

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