Design System

Background

The background component is an essential element in the design of an application, as it sets the overall visual aesthetic and tone of the interface. It can be used to create a sense of depth, texture, and dimensionality, and can also be used to draw attention to certain elements or to create a sense of hierarchy within the layout. It is used in all components of GoodBarber.

Anatomy

The background component is composed of 3 atoms : Image, Gradient and Color. The default mode for the image is center & fill by keeping the aspect.

The order of display is the following:

The 3 atoms of the background component

The 3 atoms of the background component

Properties

This component has a special place because it is found everywhere and can be given a multitude of properties. The example below shows how fundamental this element is and how it can take on a different appearance depending on the user's choices.