Design System

Background

UI Components

The background component is crucial in app design, establishing the visual aesthetic and tone. It adds depth and texture and can draw attention to elements or create a hierarchy within the layout. It is used across all GoodBarber components.

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.