CSS UI patterns

Flag/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>