Design System

Overlay atom

The Overlay atom is a gradient that is placed on top of an image, a component or a page: it can be transparent and its colors can be customized.

Overlay on image

Overlay on image

Documentation

We’ll use the Atom overlay mainly in these 2 situations:

  • Over an image, a component, or an entire page to ensure the readability of a text or any other element in superposition.

In the examples below: Bookmark / Event / Coupon / Multilevel Card (gradient)

Overlay examples on images

Overlay examples on images

  • To prompt action by isolating a component from the rest of the App.

In the examples below :Floating Menu / Modal

Overlay examples on screen

Overlay examples on screen