A flyout is a container which slides out from the header and contains content. It is often used in the product to index ‘Create’ functions or ‘Settings.’ In marketing and care it is used or to display contact information or navigational items.


Flyout modal in product (Accountant product screen).

Please refer to product header under navigation.

Flyout modal in trowser (QBO product)

Flyout modal in marketing

Appearance and behavior

The size of a flyout depends on the grid columns and can be slightly different depending on the column system.

Product grid uses two sizes

The smaller version is spanning over 4 columns and the larger version spans over 9 columns. On a 1200 breakpoint, the small flyout is 340px and the larger flyout 760px.

The flyout in products appears on click and will disappear on the off state. The margin around the content are 60px to the left and right and 40px on the top and bottom. This flyout behavior is connected to the animations in the header.

The flyout in marketing appears on roll-over and will disappear on the off state. The margin of the content should be 20pxPlease refer to marketing global header under navigation.

Launch Preview
px wide

  • Was this Helpful?