Components
Taglines
Taglines are short paragraphs of text with the USA flag to their left that are used in the header and footer across consumerfinance.gov.
Types
Standard tagline
An official website of the
United States government
HTML code snippet
<div class="a-tagline">
<span class="u-usa-flag"></span>
<div class="a-tagline__text">
An official website of the
<span class="u-nowrap">United States government</span>
</div>
</div>Implementation details
The flag itself is a stand-alone element of <span class="u-usa-flag"></span> that uses a utility class that embeds a double-resolution flag png via a data URI.
Large tagline
An official website of the
United States government
HTML code snippet
<div class="a-tagline a-tagline--large">
<span class="u-usa-flag"></span>
<div class="a-tagline__text">
An official website of the
<span class="u-nowrap">United States government</span>
</div>
</div>Implementation details
The u-nowrap container prevents wrapping of the “United States government” text. If the content of the tagline contains markup it needs to go inside a generic div container.
Extra large tagline DEPRECATED
An extra large tagline, which stacks on mobile.
We're a government agency whose mission is to protect consumers
from financial harm.
HTML code snippet
<div class="a-tagline a-tagline--xlarge">
<span class="u-usa-flag"></span>
<div class="a-tagline__text">
We're a government agency whose mission is to protect consumers
from financial harm.
</div>
</div>