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.
<H1> Page Title with CTA
<H2> Subhead goes here
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?
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
3-Column Callouts are used to promote featured products or services related to the page as well as the specific customer benefits of using a product or service. These callouts can be used with or without icons and always have a White (#FFFFFF) background.
<H2> Desktop 3-Column Callout With Icons
First Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
Second Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
Third Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
<H2> Desktop 3-Column Callout WithOut Icons
First Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
Second Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
Third Product or Service
Lorem ipsum dolor totam quo eveniet facere corrupti maiores, suscipit aliquam repudiandae!
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
<H2> Desktop 1-Column Centered Short Sections
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aliquam, sapiente dolores nam magnam commodi aperiam iusto eius sunt optio qui exercitationem provident ipsam fugit inventore sit veritatis nostrum voluptatum?
Desktop 1-Column Centered Short Section
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).
<H2> Desktop Bottom-of-Page CTA
<H2> Desktop Bottom-of-Page Link CTA
Learn more about Call To Action
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.
<H2> Desktop Informative Drawer Component
Active or hover state drawer content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Active or hover state drawer content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Active or hover state drawer content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 4
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
<H2> Mobile Informative Drawer Component
<H3> Collapsed Drawer Title
<H3> Collapsed Drawer Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 245 characters max.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 245 characters max.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<H3> Expanded Drawer Title
Lorem ipsum dolor sit amet consectetur tenetur officiis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, eos similique? Nostrum voluptatum porro reiciendis excepturi, suscipit quo molestias! Aliquid culpa soluta sequi ducimus, eaque ad nisi! Voluptate, officiis porro!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem aliquam illo quaerat illum saepe repudiandae dolorem quos fugit laborum modi temporibus, eligendi unde provident sint! Laudantium nihil vel nostrum est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi impedit, quaerat id animi voluptatem, doloremque error exercitationem doloribus aspernatur et ut officiis quos at, odio voluptatibus recusandae quibusdam numquam neque?
<H3> Collapsed Drawer Title
Expanding Detailed Drawers
Expanding Detailed Drawers are similar to Informative Drawers in that they present significant amounts of information in a relatively small space. For Expanding Detailed Drawers, the default closed state includes a heading, the first few lines of content, and a Show More link and icon. Once expanded, the drawer displays more content with a Show Less link andicon. An Expand All or Hide All link to the right of the Expanding Detailed Drawers <H2> heading allows the user to show/ hide all drawers.
Light Background Gray (#F7F7F7) and White (#FFFFFF) versions of these drawers are available allowing them to slot between any other component.
On desktop, drawer content expands to 60 percent of the container width; on mobile to 100%. The Drawer Label and content aligns to the top-left of the drawer. Like Informative Drawers, there is no set minimum or maximum number of drawers, but in general, include at least 3 and no more than 7 drawers.
<H2> Desktop Expanding Detailed Drawer Title
<H4> First Drawer Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Show More
<H4> Second Drawer Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Show More
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 245 characters max.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 245 characters max.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<H4> Third Drawer Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Show More
Desktop Expanding Detailed Drawer
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).
<H2> Large Text Card Component Headline
<H3> First Card Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, earum eveniet dicta, magni animi cumque voluptas, non asperiores illum delectus provident excepturi dignissimos explicabo dolore temporibus molestias accusantium soluta perspiciatis!
<H3> Second Card Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, earum eveniet dicta, magni animi cumque voluptas, non asperiores illum delectus provident excepturi dignissimos explicabo dolore temporibus molestias accusantium soluta perspiciatis!
Desktop Large Text Card Component
<H2> Mobile Large Text Card Component Headline
<H3> First Card Header
<H3> Second Card Header
Mobile Large Text Card Component
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.
Desktop Small Text Only Card Component w/Background
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> 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.
Desktop Small Image Cards
<H2> Small Logo Card Heading
Partner Name
Partner Name
Partner Name
Desktop Small Logo Cards
Alternating Copy and Graphic Blocks
Alternating Copy and Graphic Blocks come in 2 sizes, large and small. They are primarily used on marketing pages where a number of products or services are featured and require more prominence (or real estate) than a card treatment.
Both Large and Small Blocks include a <H2> heading followed by descriptive text on a #F7F7F7 background.
On desktop, blocks typically start with text on the left and an image on the right, but that order can be flipped if doing so better flows from the preceding page content. On mobile, the blocks stack and the image is always on top with the text block below
<H2> First Large Alternating Copy and Graphic Block Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<H2> First Large Alternating Copy and Graphic Block Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Desktop Large Alternating Copy and Graphic Blocks
<H2> First Large Alternating Copy and Graphic Block Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<H2> First Large Alternating Copy and Graphic Block Title
Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Desktop small Alternating Copy and Graphic Blocks
Back to Top Jump Link
The back to top jump link allows users to quickly return to the top of longer screens.
The (optional) component typically appears only once the user has scrolled down 1000 px on a screen where component is deployed. The link is ‘sticky’ and, once appearing, remains affixed to the right browser chrome until the user scrolls above the 1000 px trigger depth.
