Visual Elements

Resources

Layout

Colors

#cddeea Primary Lighter

#e6e6e6 Gray Lighter

#b60000 Red

#0071bc Primary

#5c5c5c Gray

#f4b600 Gold

#003960 Primary Dark

#1b1b1b Black

#155724 Green

Contrast between foreground and background colors must be at least 4.5:1 ratio at WCAG AA standard. Color contrast checker

Contrast grid builder

Fonts

This is the sans serif font Open Sans Web used in headings.

This is the sans serif font Source Sans Pro Web used in most body and ui elements.

This is the serif font Cormorant Garamond Web. It is an alternate option, not widely used in the site.

This is the monospace font Roboto Mono Web used for code samples.

Headings

H1 | Heading 1 - reserved for page title

H2 | Heading 2

H3 | Heading 3

H4 | Heading 4

H5 | Heading 5
H6 | Heading 6

Horizontal rule

Lists

Ordered lists

  1. Item - standard list
  2. Item
  3. Item
  4. Item - nested ordered lists
  5. Item
    1. Item
      1. Item
      2. Item
    2. Item
  6. Item

Unordered lists

  • Item - standard unordered list
  • Item
  • Item
  • item - nested unordered lists
    • Item
    • Item
      • Item
      • Item
    • Item
  • Item

Misc lists

  • Item - list with no bullets/number
  • Item
  • Item
  1. item - ordered list with nested unordered lists
    • Item
    • Item
      • Item
      • Item
    • Item
  2. Item

Definition lists (used on the Glossary page)

Term

Definition of the term

Summary disclosure (used for Questionnaire pages)

Description (click to expand)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in elementum ligula. Donec ultricies sem eget tincidunt elementum. Aenean mattis consectetur ex. Etiam ut mauris pellentesque, euismod arcu ac, suscipit dui. Vivamus sit amet nisl dapibus, lacinia nisi at, sodales nisl. Morbi vitae orci vel mi suscipit ornare. Proin dictum auctor porttitor. Donec sapien ante, placerat vitae imperdiet ac, posuere quis est. Nulla in lectus gravida quam tristique vehicula et non quam.

  • Item 1: Maecenas neque est, vestibulum in suscipit consequat, rhoncus id dui.
  • Item 2: Nullam volutpat, tellus nec tincidunt dignissim.
  • Item 3: Neque sem ullamcorper tortor, et pulvinar arcu enim et mi.

Main body

In-text link

In-text link hover

In-text link visited / active

Footer

Footer link

Footer link hover

Footer visited / active

Return to top link used in Glossary accordion sections

Return to top

Note: Use clearfix code to float it to the right

Components

Accordions

Used to shorten long pages, organize Asterisk Table pages, expand/collapse long lists of variables, or contain long program code displayed on codebook supplement pages.

Note: Use the appropriate heading level for your page (in the code). Additionally, the aria-expanded attribute in the code of the first accordion section can be set to true for open or false for closed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel risus molestie, sollicitudin sem eu, semper libero. Nullam sit amet orci faucibus tortor venenatis sodales.

Nunc sed urna at sem rhoncus sodales. Etiam vel enim vitae magna faucibus viverra quis vitae lacus. Nunc malesuada nisi vitae diam pulvinar ultrices. Donec neque ligula, interdum et accumsan eu, rutrum pretium nisl.

Integer elementum dolor velit, vitae porta risus molestie dapibus. Cras tempor ligula vitae mauris sagittis, id consectetur odio tincidunt. Mauris laoreet elit in orci finibus commodo. Aenean ultricies mi sed hendrerit tristique.

Alerts (in-page and form validation)

Note Use appropriate heading level within alert code based on page context.

Informative status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

The slim alert format has no heading.

Video resource

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

The slim alert format has no heading.

Created variables (or Event History, etc.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

The slim alert format has no heading.

The slim alert format has no heading.

Warning status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

The slim alert format has no heading.

Success status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

The slim alert format has no heading.

alerts (site wide notices)

Short alert message

Standard informational site alert: Additional context and followup information including a link.

Emergency alert message

Standard emergency site alert: Additional context and followup information including a link.

Buttons

Primary Secondary Outline

Button groups

Note: use to group related actions.

Cards (used on Topical Guide index pages)

Note: Use appropriate heading level within the card code based on page context.

  • Card

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

  • Card

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

  • Card with media

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

  • Media and header first

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

  • Inset media

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

  • Exdent media

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

  • Flag default

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Flag media on right

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

  1. Specs (see bottom of page for sample)
  2. Visible on every page
  3. Contains 3 rows:
    • Primary (lighter gray): Footer links to additional information
    • Secondary (gray): BLS info, which is set in Appearance > NLSinfo sub-theme > Settings
    • Admin login (below footer, lower right)

Form elements

Textbox

This is an input hint (instructional prompt).

You can enter up to 25 characters

Textarea

This is a textarea hint.

Checkboxes (default)

Note When using the <fieldset> tag, do not use the <legend> tag. Instead use a <span class="usa-legend"> to achieve consistent spacing with the other labels.

Sample legend

Checkboxes (tile)

Sample legend

Combo box and dropdown menu

Note: NLSinfo uses this in the Bib and has additional css and js impacting the elements.

Combo box good for long lists, while dropdown good for 7-15 items.


Radio buttons (default)

Select one:

Radio buttons (tile)

Select one:

Header

  1. Specs (see top of page for sample)
  2. Visible on every page
  3. Contains:
    • Logo text: National Longitudinal Surveys
    • Lead: A program of...
    • Courtesy (secondary) menu: Home | Bib | Contact
    • Search box
    • Main menu tabs: Getting Started | Cohorts | Accessing Data

Alphabetical menus

Skip to:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Examples are on the Glossary and Bib LIST search pages: Author List

Side navigation

Pagination

Tables

Tables are wrapped with the following code to allow scrolling when needed.

<div class="usa-table-container--scrollable" tabindex="0"> 
   [table] 
</div>
Table caption: A table with a row header and column header.
Header 1 Header 2 Header 3
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1000.1
Item 2 In sodales tincidunt mi, sit amet ornare ligula cursus at. 1000.2
Item 3 Aliquam at eros at dui ornare pharetra. 1000.3
Item 4 Mauris ut porttitor mauris. Donec facilisis mollis sapien. 1000.4

Tabs

A tab component doesn't exist in USWDS, so this is styled to look like tabs. The Header's main navigation is "tab" example using buttons. Tabs are also used in the Topical Guide section to switch between cohorts when viewing a topic, such as Employment.

NLSY97 NLSY79 NLSY79 Children Mature and Young Women Older and Young Men

Tags

Tags are used to note NEW content or post a date Revised Oct 19, 2020 for updated content. See errata pages for samples.