Design System

Overlay atom

Atomic Components

The overlay atom is a gradient or color placed on top of an image, component, or page. Transparency can be adjusted to enhance the readability of a text or help prompt action.

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