Flyout

This component moves a content up/right/down/left relative to its original position and overlaps the content.

The following code examples shows how to use accordions:

<div class="flyout">
  <!-- Your Content-->
</div>

The following list describe all existing block/element/modifier classes of the component.

  • .flyout - required move the component up for 1rem and overlaps the upper content
  • Modifier
    • .flyout--right - move the component to the right
    • .flyout--bottom - move the component to bottom
    • .flyout--left - move the component to the left
    • .flyout--off - disable the moved position back to normal
    • .flyout--size-{SIZE} - changes the distance to the original position of the component in rem
    • .flyout--no-shadow - remove shadow

The variables are:

  • SIZE 2, 3, 4, 5

Basic Example:

Theme basic Screen size XL
html

asd

Theme basic Screen size XL
html