Flyout Block -- from bottom (default)

Flyout Block -- modal (displays as a modal window on large screens)

Flyout Block -- modal (trigger initially disabled, focus on first focusable field)

The first focusable field should get focused.




Flyout Block -- modal (manual focus)

Flyout Block -- from top (auto focus on second field)

The second focusable field should get focus, as it has the attribute `data-autofocus`.




Flyout Block -- from left (First heading as label, with description element marked with `data-flyout-description`)

This is the title of the flyout block

This paragraph will describe the flyout block.

Flyout Block -- from right

Flyout Block -- fade

Flyout Block -- fade from bottom

Flyout Block -- fade from top

Flyout Block -- fade from left

Flyout Block -- fade from right