Web Components

Accordions

Content placed within an accordion is not fully searchable or accessible to all users. Limit accordion usage to only FAQs and directories. This will allow search engines to search more text for results, and users can simply scroll through a page without clicking to reveal content. Refer to the HHS Storybook accordion documentation for different accordion options.

Alerts

Use alerts to inform users of important, usually time-sensitive information. Alerts should be short, but descriptive. Refer to the HHS Storybook alert documentation for different alert options.

Buttons

Buttons should be simple, bold and fit the approved HHS color palette. USWDS offers predefined button styles if you choose to use them (btn-primary, btn-info, etc.) Refer to the HHS Storybook documentation for available button options.

Cards

A card is often a summary or brief overview of a topic. It can contain an image, text, links and a button. A card is meant to be used in a group of cards, not one card by itself. Refer to the HHS Storybook card documentation for how to use the card component in your theme.

• Card Example 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta pulvinar magna, ut porttitor nulla interdum in. Maecenas eget fermentum erat, in condimentum nisl. Maecenas viverra elit ut mi tincidunt hendrerit.

  • Link 1
  • Link 2
  • Link 3

  Take Action

• Card Example 2

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta pulvinar magna, ut porttitor nulla interdum in. Maecenas eget fermentum erat, in condimentum nisl. Maecenas viverra elit ut mi tincidunt hendrerit.

  • Link 1
  • Link 2
  • Link 3

  Download PDF

Calls-to-Action

This component is for text, links, simple graphics and buttons only. A red background color should be reserved for high priority messages only. Refer to the HHS Storybook call-to-action documentation to see the available color options.

Hero Banners

The hero component can be used on a homepage or landing page.

• The background image must follow the HHS Champion brand and imagery guidelines.
• The hero message should be short and preferably include a button for the user to take an action. 
• There are two main style options for the hero: standard or transparent.
• Refer to the HHS Storybook standard hero documentation for more information on how to implement this component.

Hyperlinks

• Do not use color alone to indicate a hyperlink.
• When linking to files, the file type should be included in parenthesis as part of the link.
  • Example: Nursing Facility - Vaccination Report (Excel)
  • Example: Vendor Interaction Policy (PDF)
• URLs should be embedded within short, descriptive text rather than using the URL itself. This provides context for your links and is an accessibility best practice, providing a better user experience. It also prevents long URLs from breaking to multiple lines, potentially creating broken links.
  • Example: Review the list of all HHS programs and services.

Icons

USWDS provides a large set of icons which can be helpful when paired with meaningful text. Do not use icons alone as this can pose accessibility issues and be confusing to users. Refer to the HHS Storybook icon documentation to learn more about how to use icons.

February 10, 2022 - 1 p.m.

Webcasting Available

Imagery

All website design elements and photographs should follow the HHS brand guidelines. Learn more about these requirements in the imagery section.

Image Specifications

All graphics should be saved for the web as:

• File formats: .jpg, .png
• Quality: 80%
• Resolution: 72 dpi

Alignment: Options for aligning images are left, center, and right.

Alt Text is essential for both accessibility standards and Search Engine Optimization. When using images, ensure alt text is entered for images that convey meaning or data. Decorative images may leave alt text blank, but the attribute should still be present. Example: alt=””

Search Forms

Having a well-designed search form(s) on your site allows users to interact with your content and find what they are looking for, creating a positive user experience.

• Search forms should be used to allow users to search for specific keywords and even filter by different types of content.
• Form fields should be clearly labeled and display help text if necessary.
• Make sure your help text is clear and easy to read.
• The form button should be easy to identify on the page as this is an important call-to-action.

Typography

The HHS brand fonts embody the HHS Champion brand while meeting accessibility guidelines.

Approved Google Fonts for Web Use
Slab-serif: Arvo Bold/Regular, Roboto Slab Bold/Regular
Sans-serif: PT Sans, Fira Sans, Verdana, Tahoma

• Use a slab-serif brand font for page titles, headlines and h1s.
• Use a sans-serif brand font for h2-h6, body and everything else.
• Use CSS to define your font stacks with the preferred font followed by fallback fonts:
  • Example: font-family: {“Arvo”, “Roboto”, serif;}
  • Example: font-family: {“PT Sans”, Verdana, sans-serif;}
• Don’t use all caps for anything other than small actionable areas. Buttons are an acceptable use case.

For typography usage in other materials, refer to the main typography section.