A dedicated pattern for a frequently used lockup, the flag pattern — also known as the media object — is a simple arrangement of graphic and content. Usually seen with an icon to the left and text content to the right, the flag is appropriate for status icons, alerts, and user-generated comments. We can also use a flag within each row of a listing to provide a baseline of visual structure to a list of items.
Modifiers can allow for varying amounts of space between the content and its graphic, as well as control over the relative vertical alignment of the two sections — controlling whether they are top-, center-, or bottom-aligned. Sometimes it can also be useful to provide a breakpoint-aware modifier to control when a flag should have its graphic placed above the content instead of to the side.
.flag.flag_center.flag__head.flag__body.flag--small > .flag__head.flag--medium > .flag__head
ErrorAn unknown error occurred while processing your request. Please try again in a few minutes.