Overlay

Overlay component is used to display something on top of the page.
It can be used to display a lottie animation, or any other animation that needs to be displayed on top of the page. The overlay component can be move to a specific location in the DOM, and can be hidden by default or after a certain time.

phone_iphone All universes

TWIG : Universes/_common/_twig/_components/_overlay/_overlay.twig
CSS : DesignSystem/_tactics/_common/_css/_components/_overlay/_overlay.scss

Lottie link

Default link

The lottie component is positionned by default, but it can be positionned dynamically in JS.

Centered link

Contextual class on the lottie component : is-centered

Full link

Contextual class on the lottie component : is-full

Full horizontal link

Contextual class on the lottie component : is-fullHorizontal

Full vertical link

Contextual class on the lottie component : is-fullVertical

Full horizontal centered link

Contextual classes on the lottie component : is-fullHorizontal is-centered

Full vertical centered link

Contextual classes on the lottie component : is-fullVertical is-centered

Full centered link

Contextual classes on the lottie component : is-full is-centered

Custom position link

Contextual class on the lottie component : is-centered
Custom style on the lottie component : top:100px;width:100px;