Banners

Hero (Page Title) Banners

Hero banners are typically used on section landing pages. These banners include content and imagery (typically lifestyle imagery). They may include Primary and Secondary CTAs and always include a Light Gray (#F7F7F7) background.

Heading Text

Heading Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente omnis explicabo laboriosam temporibus voluptatum quisquam accusamus, rerum consequatur? Minima sed dignissimos id. Ipsam reiciendis culpa sit ullam accusamus ratione quod?

Button text

Secondary Link

Callouts

Callout headings and text are centered (except for the 1-Column Centered Short Section on mobile). Callouts use <H2> headings. When page hierarchy requires another heading level, CSS will be used to match <H2> style; this allows for a consistent appearance of callouts regardless of the preceding heading level.

3-Column Callouts

1-Column Centered Short Sections

This element is used to break up sections or to focus attention on a new concept or CTA. 1-Column Centered Short Sections always have a White (#FFFFFF) background and include a CTA

Bottom-of-Page CTAs

Like 1-Column Centered Short Sections, the Bottom-of-Page CTAs always have a White (#FFFFFF) background and include a CTA. This element can use either a Primary CTA or text link.

This element is typically used at the end of long or complex screens and the CTA typically complements the preceding content (e.g., a registration CTA on a page describing a service that requires an account or an FAQ link on a page describing services).

On-Screen Messaging

There are 4 types of on-screen messaging component: Information, Success, Warning, and Error/Alert.

Note: for global (site-wide) alerts, see Elements: Global Navigation.

Messaging can be implemented at the section, screen, or element level depending on the need and context. Messaging can be static or can be closed by the user if a close "X" is included with the message box. Messaging can also display only temporarily, providing immediate feedback to an action (e.g., a success 'toast' or 'snackbar').

Each type of on-screen messaging has icon/heading/text, icon/text, and text-only variants as well as the option to have a close icon.

On-Screen Messaging Specifications

On page messages default to the width of the container in which they appear. The following specifications apply across on-screen messaging variants.

Informative Drawers

Informative Drawers present significant amounts of information in a relatively small space. Desktop drawer titles and summaries (the Drawer Label) contain all of the content necessary for selection and search indexing. Mobile drawers only list drawer titles.

Drawers use a Light Background Gray (#F7F7F7) background. Drawer labels default to a Light Background Gray (#F7F7F7), with the selected drawer using a USPS Digital Blue (#333366) background (the first drawer is selected by default on page load) and a Background Hover Gray (#EDEDED) when active.

Drawer content aligns to the top-left of the drawer, regardless of the position of the Drawer Label, and can contain content, tabular data, imagery, and CTAs. There is no set minimum or maximum number of drawers, but in general, include at least 3 and no more than 5 drawers.

Cards

Cards provide a flexible, mobile-friendly framework for presenting disparate or related but distinct content (i.e., products). The look and feel of cards differs from Large Text Cards to Small Text Cards. Cards use <H2> and <H3> headings or are styled to match an <H2> or <H3> using CSS when the page hierarchy requires a different heading level.

Large Text Cards

On desktop, Large Text Cards use a White (#FFFFFF) background with a Dark Background Gray (#D8D8D8) border and desktop body/paragraph rule for 66 percent text width.

On mobile, they use a Light Background Gray (#F7F7F7) background and no border or accent, as well as a drawer treatment (defaulting to closed) to limit display size (closely resembling the mobile view of an Informative Drawer).

Small Text-Only Cards

Small Text Cards come with and without images. They contain summaries or content previews that link out to the full description using red Right Chevron Links.

The Text Only variant comes in two versions: one with a Light Background Gray (#F7F7F7) background and the other with “no background” (a default White/#FFFFFF background). They include a left-aligned <H2> heading

<H2> Desktop Small Text-Only Card Component w/Background

<H3> First Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eos aperiam cupiditate obcaecati culpa id voluptas qui corporis. Similique, libero nemo ea odio hic voluptatibus veniam.

<H3> Second Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eos aperiam cupiditate obcaecati culpa id voluptas qui corporis. Similique, libero nemo ea odio hic voluptatibus veniam.

<H3> Third Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eos aperiam cupiditate obcaecati culpa id voluptas qui corporis. Similique, libero nemo ea odio hic voluptatibus veniam.

Instance of small text-only card component with background for desktop

Small Image Cards and Logo Variant

Small Image Cards come in 2 variants, image-over-text and logo-over-text.

The image-over-text variant features a lifestyle or product image over a (red chevron linked) <H3> heading followed by descriptive text on a #FFFFFF background.

The logo-over-text variant is used for listing/linking to partner and vendor sites. It features the partner/vendor logo over a (red chevron) <H3> link on a #333333 background. Both variants include a centered <H2> heading.

<H2> Desktop Small Image Card Heading

<H3> First Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ex cumque fugiat sit dolorem nostrum adipisci, nulla quasi a eos tenetur rerum repudiandae aliquam voluptatem fugit. Qui, nobis! Magni, qui.

<H3> Second Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ex cumque fugiat sit dolorem nostrum adipisci, nulla quasi a eos tenetur rerum repudiandae aliquam voluptatem fugit. Qui, nobis! Magni, qui.

<H3> Third Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ex cumque fugiat sit dolorem nostrum adipisci, nulla quasi a eos tenetur rerum repudiandae aliquam voluptatem fugit. Qui, nobis! Magni, qui.

Instance of small logo cards for desktop

<H2> Desktop Small Logo Card Heading

Partner Name

Partner Name

Partner Name

Instance of small logo cards for desktop