Web 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 and other apps.
Types
Standard tagline
HTML code snippet
<cfpb-tagline />Implementation details
The flag itself is a stand-alone custom element of <cfpb-flag-usa /> that uses a utility class that embeds a double-resolution flag png via a data URI.
Custom text can be placed between the opening and closing tag to supplant the default text.
Large tagline
HTML code snippet
<cfpb-tagline islarge />Implementation details
Internally, white-space: nowrap is set on the container to prevent wrapping of the “United States government” text.