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: