Web Atoms

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.

Buttons

Buttons should be simple, bold and fit the approved HHS color palette. HHS uses two different button styles: a yellow button for calls-to-action and a simple blue button for everything else. USWDS also offers predefined button styles if you choose to use them (btn-primary, btn-info, etc.) Refer to the documentation for more information on USWDS buttons.

• Card Example

  • Link 1
  • Link 2
  • Link 3

  Blue Button

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

HHS uses Font Awesome icons. For Drupal sites the Font Awesome module is a good solution; however, the library should be hosted locally instead of using the Content Delivery Network. USWDS provides a different set of icons to choose from as well. Icons can be helpful when paired with meaningful text. Do not use icons alone as this can pose accessibility issues and be confusing to users.

February 10, 2022 - 1 p.m.

Webcasting Available

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.