CSS UI patternsFlag/Media
Flag lockups
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 {
display: flex;
flex-wrap: nowrap;
}
.flag_center {
align-items: center;
}
.flag__head {
flex-grow: 0;
flex-shrink: 0;
}
.flag__body {
flex-grow: 0;
flex-shrink: 1;
}
.flag--small > .flag__head {
margin-right: 1.2rem;
}
.flag--medium > .flag__head {
margin-right: 2.4rem;
}
<div class="alert alert--error">
<div class="flag flag--small flag--center">
<div class="flag__head">
<img class="icon icon--medium" src="/error.svg" alt="" />
</div>
<div class="flag__body">
<h3 class="text text--medium text--bold ">
Error
</h3>
<p>
An unknown error occurred while processing your request. Please try again in a few minutes.
</p>
</div>
</div>
</div>