Web Atoms

Atoms are the building blocks of the user interface. These elements cannot be broken down any further. Read this article on atomic design methodology for more information.

Accordions

Accordions allow users to scan headings to quickly find the information they are looking for. Accordions can be helpful when there are several large sections of text on a page. However, pages that are very long can pose issues for users with disabilities. Refer to the USWDS documentation for more information on accordions, including guidance on when to use them.

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.

Call-to-action example to sign up for email updates.

Sign Up

  • 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.
  • 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.

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.