Inline message

Inline messages are used to separate content from body text. They draw the eye to information that is particularly important or distinct.

Overview

The inline message component consists of a vertical black line, low-opacity white surface, and a text container.

Black vertical bar followed by black text: Optional description text goes here; on a light grey background inside a thick bordered darker grey box.

Usage context

When to use

Use inline messages to separate certain text from the surrounding text. Only use inline messages following a string of body text.

Use cases include:

Pull quotes
Highlighting statistics or quick facts
Redirecting users to other urgent courses of action, such as calling 911 in the event of an emergency

When to use something else

Don’t use inline messages in any of the following situations:

As standalone components outside of body text
As feedback that reacts to user inputs

Usage guidelines

Inline messages should always follow body text, and ideally should be sandwiched between passages of body text.

Expect inline messages to be read first by users who skim the page. Include enough context so that users aren’t confused.

nyc.gov mobile portrait view: Eviction warrants heading with a paragraph of text followed by inline message: Call 911 to report landlords who lock you out or withhold essential services such as electricity, heat or water on purpose. Then followed a continuation of the article.

Same inline message from first example but here it’s above the heading.

Inline message

Inline messages can be utilized by wrapping the text in a blockquote element

This code is for reference only. The library is currently in beta. Check back for future releases.

Optional description text goes here.

<blockquote>
  Optional description text goes here.
</blockquote>