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.
Usage
Flyout in product
Learn more about product headers
Flyout in trowser
Flyout 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 20px. Please refer to marketing global header under navigation.
