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

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.

Design System

Background

Anatomy

Properties