Background

Layout used to create a certain type of background on a component. In the styling, these are extendable for more consistency in the code and the components. The background is determined using an inline background image css property. The background color as well can be determined inline. These options are all styled inline because the client wants the ability to change these manually.

As a fallback, classes in the form of modifiers are provided.

Dots

Used to create a component with a dotted background. By adding the l-background--fades modifier, there is a faded effect added.

px 

			
				<div class="l-background" style="background-image: url('/assets/images/background/dot-pattern.png');"></div>

Fades light orange

Used to create a component that has a background which fades. Important to note is that this can only be used in combination with the existing l-background modifiers like: l-background--dots, l-background--lines and the element or one of the parents should contain u-bgc-background-light-orange.

px 

			
				<div class="u-bgc-background-light-orange l-background l-background--dots l-background--fades-light-orange"></div>
<div class="u-bgc-background-light-orange l-background l-background--lines l-background--fades-light-orange"></div>

Fades

Used to create a component that has a background which fades. Important to note is that this can only be used in combination with the existing l-background modifiers like: l-background--dots, l-background--lines.

px 

			
				<div class="l-background l-background--fades" style="background-image: url('/assets/images/background/line-pattern.png');"></div>
<div class="l-background l-background--fades" style="background-image: url('/assets/images/background/dot-pattern.png');"></div>

Illustrative bottom

px 

			
				<div class="l-background l-background--illustrative-bottom"></div>

Illustrative filled bottom right

px 

			
				<div class="l-background l-background--decoration-filled-bottom-right"></div>

Illustrative

px 

			
				<div class="l-background l-background--illustrative"></div>

Image with overlay dark

Used to create a component with a background image that has a gradient overlay on top of it, to give it the typical Cevora brand feeling. This variant has an extra, darker, gradient on top of it, to enhance readability.

px 

			
				<div class="l-background l-background--with-image-dark" style="background-image: url('/assets/images/background/image.png');">
</div>

Image with overlay

Used to create a component with a background image that has a gradient overlay on top of it, to give it the typical Cevora brand feeling.

px 

			
				<div class="l-background l-background--with-image" style="background-image: url('/assets/images/background/image.png');">
</div>

Lightblue

Used to create a background with the lightblue brand color. Some components (e.g buttons) may change when wrapped inside this type of background.

px 

			
				<div class="l-background l-background--lightblue"></div>

Lines

Used to create a component with a striped background. By adding the l-background--fades modifier, there is a faded effect added.

px 

			
				<div class="l-background" style="background-image: url('/assets/images/background/line-pattern.png');"></div>

Orange

Used to create a background with the orange brand color. Some components (e.g buttons) may change when wrapped inside this type of background.

px 

			
				<div class="l-background l-background--orange"></div>

Purple

Used to create a background with the purple brand color. Some components (e.g buttons) may change when wrapped inside this type of background.

px 

			
				<div class="l-background l-background--purple"></div>

Documentation

Modifiers

  • l-background--dots

    Create a background with the dotted pattern

  • l-background--lines

    Create a background with a line pattern

  • l-background--orange

    Create a background with a single orange color

  • l-background--purple

    Create a background with a single purple color

  • l-background--fades

    Class that can be combined with other background classes to make it fade in and out on the top and the bottom of the container

  • l-background--illustrative

    Creates a background with illustrations on the left and right side and adds a grey background.

  • l-background--illustrative-bottom

    Visualises the same illustrations as an illustrative background. Except the arrows are all aligned to the bottom of the container.

  • l-background--illustrative-bottom-small

    Visualises the same illustrations as an illustrative background, with the arrows aligned to the bottom of the container. Except the arrows behave smaller between tablet and desktop width so they won't overlap.