Flag

The Flag object is a simple abstraction that displays an image or other media next to descriptive content. The concept comes from the Nicole Sullivan’s Media Object and was updated to allow vertical alignment and renamed the Flag Object by Harry Roberts.

Usage

The Flag object is a simple concept but can be used any time there is an image or other media next to descriptive content.

Guidelines

• The media can be on the left or right of the content area.
• The content area can be vertically aligned to the top, middle, or the bottom of the media.
• There are no restrictions on the content that can be put in the content area.
• The Flag object can be nested inside another Flag object.
• The spacing between the media and the content area can be set to any Spacing value.
• On small viewports, the content area can be configured to move below the media.

Reverse Modifier

This modifier rearranges elements of the flag so the media is to the right of the content area.

Accessibility

Tabbing and screen readers are based on DOM order. Keep in mind that this reverse modifier is purely a visual change, not a DOM change. With more complex layouts, be mindful that visual and DOM order misatches will affect keyboard, magnifier, and screen reader users.

Stacked Modifier

This modifier rearranges elements to stack on top of each other based on a breakpoint. This can be used in conjunction with reverse, but the stacking will always have the media element above the body content.

Anatomy

• A Flag object must have a fixed image or other media.
• A Flag object must have a flexible content area.