Components

ORAU web projects use the U.S. Web Design System (USWDS). Digital Media Services (DMS) has incorporated our own components and resources alongside it to work in tandem with the USWDS. This document provides guidance on using these components and resources.

Basic HTML Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas.

This is an unordered list
This is a second unordered list item

This is an ordered list
This is a second ordered list item

The <hr> element is above this line

Custom Breakpoint Units

In addition to the standard USWDS breakpoint tokens (card, card-lg, mobile, mobile-lg, tablet, tablet-lg, desktop, desktop-lg, widescreen), the ORAU web projects have three custom breakpoint tokens.

Project custom breakpoints
Token	Width	Computed value
`tablet-sm`	37.5rem	600px
`tablet-md`	48rem	768px
`desktop-sm`	60rem	960px
`widescreen-lg`	97.5rem	1560px

Headings

Headings are used to introduce sections of content. The proper use of headings will provide a structure to the document. Furthermore, some assistive technologies enable users to move through the document from heading to heading. Failure to provide the necessary headings can lead to confusion and frustration.

The h1—h6 headings should be used to introduce new sections of content. Headings should not be used simply for stylistic purposes. Also, don't avoid using headings for stylistic reasons. CSS should be used to provide stylistic control over the content.
Most pages should only have one h1 heading. While multiple h1 headings are allowed by the HTML specification, for SEO and accessibility reasons authors should avoid this usage.
Headings should be used in sequential order throughout a given section of a webpage. Headings with a greater weight should not be used underneath those with a lower weight. For example, if the heading for a section is an h2 element, sections of content within should start with an h3 element followed by h4 headings within that section, and so on. Some assistive technologies make the content available via the heading structure, so having headings out of order can create confusion for users of such software.
Properly using headings provides context for the content for those using assistive technologies.
Use the role="heading" aria-level="num" attributes, where num is a number greater than 6, to expose headings below the standard h1—h6 elements. As a best practice, these attributes should be used on div or span elements as these elements offer no semantic behavior or purpose. The role="heading" attribute should not be used apart from the aria-level attribute. It is preferable to use the h1—h6 elements for headings where the aria-level would be set to a value of 6 or less.

Several classes are available to provide a heading-like appearance to ordinary text:

.project-heading--largest
.project-heading--larger
.project-heading--large
.project-heading--medium
.project-heading--small
.project-heading--smaller
.project-heading--smallest

The project heading styles omit bold text, which can be added by using a strong tag or by adding the text-bold class.

Font size classes

Font typeface classes

Sans serif

.font-sans-3xl
.font-sans-2xl
.font-sans-xl
.font-sans-lg
.font-sans-md
.font-sans-sm
.font-sans-xs
.font-sans-2xs
.font-sans-3xs

Serif

.font-serif-3xl
.font-serif-2xl
.font-serif-xl
.font-serif-lg
.font-serif-md
.font-serif-sm
.font-serif-xs
.font-serif-2xs
.font-serif-3xs

Mono

.font-mono-3xl
.font-mono-2xl
.font-mono-xl
.font-mono-lg
.font-mono-md
.font-mono-sm
.font-mono-xs
.font-mono-2xs
.font-mono-3xs

Font role classes

Heading

.font-heading-3xl
.font-heading-2xl
.font-heading-xl
.font-heading-lg
.font-heading-md
.font-heading-sm
.font-heading-xs
.font-heading-2xs
.font-heading-3xs

Body

.font-body-3xl
.font-body-2xl
.font-body-xl
.font-body-lg
.font-body-md
.font-body-sm
.font-body-xs
.font-body-2xs
.font-body-3xs

.font-ui-3xl
.font-ui-2xl
.font-ui-xl
.font-ui-lg
.font-ui-md
.font-ui-sm
.font-ui-xs
.font-ui-2xs
.font-ui-3xs

Alternate

.font-alt-3xl
.font-alt-2xl
.font-alt-xl
.font-alt-lg
.font-alt-md
.font-alt-sm
.font-alt-xs
.font-alt-2xs
.font-alt-3xs

Code

.font-code-3xl
.font-code-2xl
.font-code-xl
.font-code-lg
.font-code-md
.font-code-sm
.font-code-xs
.font-code-2xs
.font-code-3xs

Font size tokens

Token	Size
"micro"	10px (0.625rem)
1	12px (0.75rem)
2	13px (0.8125rem)
3	14px (0.875rem)
4	15px (0.9375rem)
5	16px (1rem)
6	17px (1.0625rem)
7	18px (1.125rem)
8	20px (1.25rem)
9	22px (1.375rem)
10	24px (1.5rem)
11	28px (1.75rem)
12	32px (2rem)
13	36px (2.25rem)
14	40px (2.5rem)
15	48px (3rem)
16	56px (3.5rem)
17	64px (4rem)
18	80px (5rem)
19	120px (7.5rem)
20	140px (8.75rem)

Project icons

Digital Media Services (DMS) projects include Scalable Vector Graphic (SVG) icon sprites for use in our products. Included, by default, is the U.S. Web Design System (USWDS) icon sprite (located at /assets/img/sprite.svg). See the USWDS icon component and associated icon list component documentation for more information about using the icon component. Incorporating the icon component into our content management system requires an adjustment of the code provided by USWDS. The code examples below have been modified accordingly.

USWDS icons

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#accessibility_new{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#accessible_forward{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#account_balance{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#account_box{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#account_circle{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#add{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#add_circle{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#add_circle_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#alarm{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#alternate_email{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#announcement{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#api{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_back{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_downward{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_drop_down{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_drop_up{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_forward{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#arrow_upward{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#assessment{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#attach_file{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#attach_money{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#autorenew{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#backpack{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#bathtub{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#bedding{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#bookmark{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#bug_report{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#build{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#calendar_today{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#campaign{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#camping{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#cancel{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#chat{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#check{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#check_box_outline_blank{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#check_circle{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#check_circle_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#checkroom{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#chevron_left{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#chevron_right{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#clean_hands{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#close{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#closed_caption{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#clothes{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#cloud{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#code{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#comment{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#connect_without_contact{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#construction{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#construction_worker{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#contact_page{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#content_copy{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#coronavirus{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#credit_card{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#deck{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#delete{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#device_thermostat{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#directions{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#directions_bike{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#directions_bus{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#directions_car{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#directions_walk{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#do_not_disturb{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#do_not_touch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#drag_handle{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#eco{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#edit{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#electrical_services{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#emoji_events{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#error{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#error_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#event{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#expand_less{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#expand_more{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#facebook{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#fast_forward{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#fast_rewind{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#favorite{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#favorite_border{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#fax{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#file_download{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#file_present{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#file_upload{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#filter_alt{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#filter_list{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#fingerprint{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#first_page{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#flag{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#flickr{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#flight{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#flooding{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#folder{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#folder_open{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#format_quote{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#format_size{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#forum{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#github{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#grid_view{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#group_add{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#groups{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#hearing{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#help{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#help_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#highlight_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#history{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#home{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#hospital{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#hotel{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#hourglass_empty{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#hurricane{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#identification{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#image{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#info{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#info_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#insights{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#instagram{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#keyboard{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#label{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#language{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#last_page{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#lightbulb{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#lightbulb_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#link{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#link_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#linkedin{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#list{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_cafe{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_fire_department{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_gas_station{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_grocery_store{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_hospital{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_laundry_service{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_library{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_offer{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_parking{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_pharmacy{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_police{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#local_taxi{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#location_city{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#location_on{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#lock{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#lock_open{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#lock_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#login{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#logout{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#loop{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#mail{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#mail_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#map{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#masks{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#medical_services{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#menu{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#military_tech{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#more_horiz{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#more_vert{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#my_location{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#navigate_before{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#navigate_far_before{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#navigate_far_next{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#navigate_next{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#near_me{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#notifications{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#notifications_active{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#notifications_none{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#notifications_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#park{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#people{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#person{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#pets{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#phone{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#photo_camera{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#print{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#priority_high{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#public{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#push_pin{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#question_mark{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#radio_button_unchecked{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#rain{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#reduce_capacity{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#remove{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#remove_circle{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#report{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#restaurant{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#rss_feed{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#safety_divider{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sanitizer{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#save_alt{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#schedule{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#school{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#science{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#search{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#security{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#send{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sentiment_dissatisfied{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sentiment_neutral{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sentiment_satisfied{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sentiment_satisfied_alt{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sentiment_very_dissatisfied{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#settings{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#severe_weather{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#share{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#shield{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#shopping_basket{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#snow{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#soap{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#social_distance{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#social_sharing{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#sort_arrow{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#spellcheck{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#star{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#star_half{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#star_outline{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#store{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#support{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#support_agent{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#text_fields{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#thumb_down_alt{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#thumb_up_alt{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#timer{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#toggle_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#toggle_on{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#topic{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#tornado{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#translate{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#trending_down{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#trending_up{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#twitter{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#undo{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#unfold_less{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#unfold_more{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#update{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#upload_file{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#verified{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#verified_user{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#visibility{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#visibility_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#volume_off{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#warning{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#wash{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#wifi{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#work{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#youtube{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#zoom_in{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#zoom_out{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#zoom_out_map{/system-asset}"></use></svg>

USWDS icon sizes

The USWDS provides classes for modifying the size of the icon. Examples are

Icon sizes

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-3" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-4" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-5" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-6" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-7" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-8" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon usa-icon--size-9" focusable="false" role="img"><use href="{system-asset}/assets/img/sprite.svg#launch{/system-asset}"></use></svg>

DMS Social icons

DMS projects also include a social SVG icon sprite (located at /assets/img/social.svg) for a number of social media sites.

Social icons

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#facebook{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#flickr{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#instagram{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#linkedin{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#twitter{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#x{/system-asset}"></use></svg>

Code sample

<svg aria-hidden="true" class="usa-icon" focusable="false" role="img"><use href="{system-asset}/assets/img/social.svg#youtube{/system-asset}"></use></svg>

Project colors

USWDS theme colors

Primary

primarybawr-primary-50#446cb4
primary-vividbawr-blue-50v#1f215a
primary-lightestbawr-primary-10#dae2f0
primary-lighterbawr-primary-30#8fa7d2
primary-lightbawr-primary-40#6989c3
primary-darkbawr-primary-60#365690
primary-darkerbawr-primary-70#29416c
primary-darkestbawr-primary-80#1b2b48

Secondary

secondarybawr-secondary-50#283655
secondary-vividbawr-blue-50#4d648d
secondary-lightestbawr-secondary-10#d4d7dd
secondary-lighterbawr-secondary-30#7e8699
secondary-lightbawr-secondary-40#535e77
secondary-darkbawr-secondary-60#202b44
secondary-darkerbawr-secondary-70#182033
secondary-darkestbawr-secondary-80#101622

Accent cool

accent-cool#00bde3
accent-cool-lighter#e1f3f8
accent-cool-light#97d4ea
accent-cool-dark#28a0cb
accent-cool-darker#07648d

Accent warm

accent-warm#fa9441
accent-warm-lighter#f2e4d4
accent-warm-light#ffbc78
accent-warm-dark#c05600
accent-warm-darker#775540

Base

basebawr-neutral-50#dfdfe2
inkbawr-neutral-95#161617
base-lightestbawr-neutral-10#f9f9f9
base-lighterbawr-neutral-20#f2f2f3
base-lightbawr-neutral-30#ececee
base-darkbawr-neutral-60#b2b2b5
base-darkerbawr-neutral-75#707071
base-darkestbawr-neutral-95#161617

Color palette

Primary

bawr-primary-1#f5f7fb
bawr-primary-2#f1f4f9
bawr-primary-5#ecf0f8
bawr-primary-10#dae2f0
bawr-primary-20#b4c4e1
bawr-primary-30#8fa7d2
bawr-primary-40#6989c3
bawr-primary-50#446cb4
bawr-primary-60#365690
bawr-primary-70#29416c
bawr-primary-75#22365a
bawr-primary-80#1b2b48
bawr-primary-90#0e1624
bawr-primary-95#070b12

Secondary

bawr-secondary-1#f3f4f6
bawr-secondary-2#eff0f2
bawr-secondary-5#eaebee
bawr-secondary-10#d4d7dd
bawr-secondary-20#a9afbb
bawr-secondary-30#7e8699
bawr-secondary-40#535e77
bawr-secondary-50#283655
bawr-secondary-60#202b44
bawr-secondary-70#182033
bawr-secondary-75#141b2b
bawr-secondary-80#101622
bawr-secondary-90#080b11
bawr-secondary-95#040509

Neutral

bawr-neutral-1#fdfdfd
bawr-neutral-2#fdfdfd
bawr-neutral-5#fcfcfc
bawr-neutral-10#f9f9f9
bawr-neutral-20#f2f2f3
bawr-neutral-30#ececee
bawr-neutral-40#e5e5e8
bawr-neutral-50#dfdfe2
bawr-neutral-60#b2b2b5
bawr-neutral-70#868688
bawr-neutral-75#707071
bawr-neutral-80#59595a
bawr-neutral-90#2d2d2d
bawr-neutral-95#161617

Blue

bawr-blue-50#4d648d

Bright blue

bawr-bright-blue-5#e6f1f8
bawr-bright-blue-10#cce3f2
bawr-bright-blue-20#99c6e4
bawr-bright-blue-30#66aad7
bawr-bright-blue-40#338dc9
bawr-bright-blue-50#0071bc
bawr-bright-blue-60#005a96
bawr-bright-blue-70#004471
bawr-bright-blue-80#002d4b
bawr-bright-blue-90#001726
bawr-light-blue-50#d1e0f3

Vivid blue

bawr-blue-50v#1f215a

Color palette

Project Components

Accordions use the USWDS accordion component. See https://designsystem.digital.gov/components/accordion/ for more information.

Accordion theming can be accomplished in several ways:

Class	Description
`usa-accordion--primary` `usa-accordion--secondary` `usa-accordion--accent-cool` `usa-accordion--accent-warm` `usa-accordion--base`	When placed on the `usa-accordion` element, changes the color of the accordion's buttons to the chosen theme color.
`usa-accordion__button--primary` `usa-accordion__button--secondary` `usa-accordion__button--accent-warm` `usa-accordion__button--base` `usa-accordion__button--accent-cool`	When added to an individual accordion button (`<button>` with the class `usa-accordion__button`), changes the chosen button's color.

Background color classes can be applied to the accordion buttons or the accordion content to modify the chosen element's appearance. The USWDS background color utility classes take the form of bg-[token], where [token] is the desired USWDS color token. See https://designsystem.digital.gov/utilities/color/ for a list of the background color classes that are available.

Examples

Basic accordion Bordered accordion Themed accordion Themed accordion buttons

Basic accordion

Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Code sample

<div class="usa-accordion">
  <h3 class="usa-accordion__heading"><button aria-controls="unique-id" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="unique-id">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="another-unique-id" class="usa-accordion__button">Another Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="another-unique-id">More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

Bordered accordion

Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Code sample

<div class="usa-accordion--bordered">
  <h3 class="usa-accordion__heading"><button aria-controls="unique-id" class="usa-accordion__button">Bordered Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="unique-id">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="another-unique-id" class="usa-accordion__button">Another Bordered Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="another-unique-id">More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

Themed accordions

Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Code sample

<div class="usa-accordion usa-accordion--primary">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Primary Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

<div class="usa-accordion usa-accordion--secondary">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Secondary Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

<div class="usa-accordion usa-accordion--accent-cool">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Accent Cool Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

<div class="usa-accordion usa-accordion--accent-warm">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Accent Warm Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

<div class="usa-accordion usa-accordion--base">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Base Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

Themed Accordion Buttons

Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Code sample

<div class="usa-accordion">
  <h3 class="usa-accordion__heading"><button aria-controls="accordion-1" class="usa-accordion__button">Default Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-1">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

  <h3 class="usa-accordion__heading"><button aria-controls="accordion-2" class="usa-accordion__button usa-accordion__button--primary">Primary Themed Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-2">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

  <h3 class="usa-accordion__heading"><button aria-controls="accordion-3" class="usa-accordion__button usa-accordion__button--secondary">Secondary Themed Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-3">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

  <h3 class="usa-accordion__heading"><button aria-controls="accordion-4" class="usa-accordion__button usa-accordion__button--accent-cool">Accent Cool Themed Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-4">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

  <h3 class="usa-accordion__heading"><button aria-controls="accordion-5" class="usa-accordion__button usa-accordion__button--accent-warm">Accent Warm Themed Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-5">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

  <h3 class="usa-accordion__heading"><button aria-controls="accordion-6" class="usa-accordion__button usa-accordion__button--base">Base Themed Accordion Button</button></h3>
  <div class="usa-accordion__content" id="accordion-6">Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

Accordion Controls

A set of buttons to open and close all the accordion content sections in an accordion can be added by including the data-show-controls="" attribute to the element with the usa-accordion (or usa-accordion--bordered) class. The attribute can be left empty, as the value has no purpose. The appearance of the data-show-controls attribute will trigger the addition of the accordion controls.

Example

Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Code sample

<div class="usa-accordion" data-show-controls="">
  <h3 class="usa-accordion__heading"><button aria-controls="controls-id" class="usa-accordion__button">Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="controls-id">Accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
  <h3 class="usa-accordion__heading"><button aria-controls="another-controls-id" class="usa-accordion__button">Another Accordion Heading</button></h3>
  <div class="usa-accordion__content" id="another-controls-id">More accordion content goes here. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
</div>

Buttons use the USWDS button component. See https://designsystem.digital.gov/components/button/ for more information.

The .usa-button button class should be used on <a> and <button> elements. The <a> element should be used for linking to other resources (pages, images, documents, etc.), and the <button> element should be reserved for interactive actions (generally, actions that require a <form> element or scripting to perform).

The USWDS button theme classes usa-button--primary, usa-button--secondary, usa-button--accent-cool, usa-button--accent-warm, and usa-button--base can be placed on the element with the .usa-button class to change the color of the accordion button to the chosen theme color.

The USWDS classes .usa-button--outline, .usa-button--inverse, .usa-button--big, and .usa-button--unstyled can be used to apply alternate styling to the button. The theme classes usa-button--primary, usa-button--secondary, usa-button--accent-cool, usa-button--accent-warm, and usa-button--base can be combined with the .usa-button--outline or .usa-button--big classes to provided themed versions of those variants.

Additionally, the classes usa-button--pill, usa-button--small-corners, and usa-button--no-corners can be applied to the button to alter the size of the rounded corners of the button.

Examples

Default button style USWDS themed buttons Alternate button styles Custom themed buttons

Default button style

Code sample

<a class="usa-button" href="#primary">Label</button>

USWDS themed buttons

Primary Color

Secondary Color

Accent Cool Color

Accent Warm Color

Base Color

Code sample

Primary Color
<button class="usa-button usa-button--primary">Default</button>
<button class="usa-button usa-button--primary usa-button--hover">Hover</button>
<button class="usa-button usa-button--primary usa-button--active">Active</button>
<button class="usa-button usa-button--primary usa-focus">Focus</button>
<button class="usa-button usa-button--primary" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--primary usa-button--unstyled">Unstyled button</button>

Secondary Color
<button class="usa-button usa-button--secondary">Default</button>
<button class="usa-button usa-button--secondary usa-button--hover">Hover</button>
<button class="usa-button usa-button--secondary usa-button--active">Active</button>
<button class="usa-button usa-button--secondary usa-focus">Focus</button>
<button class="usa-button usa-button--secondary" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--secondary usa-button--unstyled">Unstyled button</button>

Accent Cool Color
<button class="usa-button usa-button--accent-cool">Default</button>
<button class="usa-button usa-button--accent-cool usa-button--hover">Hover</button>
<button class="usa-button usa-button--accent-cool usa-button--active">Active</button>
<button class="usa-button usa-button--accent-cool usa-focus">Focus</button>
<button class="usa-button usa-button--accent-cool" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--accent-cool usa-button--unstyled">Unstyled button</button>

Accent Warm Color
<button class="usa-button usa-button--accent-warm">Default</button>
<button class="usa-button usa-button--accent-warm usa-button--hover">Hover</button>
<button class="usa-button usa-button--accent-warm usa-button--active">Active</button>
<button class="usa-button usa-button--accent-warm usa-focus">Focus</button>
<button class="usa-button usa-button--accent-warm" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--accent-warm usa-button--unstyled">Unstyled button</button>

Base Color
<button class="usa-button usa-button--base">Default</button>
<button class="usa-button usa-button--base usa-button--hover">Hover</button>
<button class="usa-button usa-button--base usa-button--active">Active</button>
<button class="usa-button usa-button--base usa-focus">Focus</button>
<button class="usa-button usa-button--base" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--base usa-button--unstyled">Unstyled button</button>

Alternate button styles

Outline

Outline inverse

Themed Outline

Big button

Other button styles

Code sample

Outline
<button class="usa-button usa-button--outline">Outline</button>
<button class="usa-button usa-button--outline usa-button--hover">Hover</button>
<button class="usa-button usa-button--outline usa-button--active">Active</button>
<button class="usa-button usa-button--outline usa-focus">Focus</button>
<button class="usa-button usa-button--outline" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--outline usa-button--unstyled">Unstyled button</button>

Outline inverse
<button class="usa-button usa-button--outline usa-button--inverse">Inverse</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--hover">Hover</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--active">Active</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-focus">Focus</button>
<button class="usa-button usa-button--outline usa-button--inverse" disabled="disabled">Disabled</button>
<button class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled">Unstyled button</button>

Themed Outline
<button class="usa-button usa-button--outline usa-button--primary">Primary</button>
<button class="usa-button usa-button--outline usa-button--secondary">Secondary</button>
<button class="usa-button usa-button--outline usa-button--accent-cool">Accent cool</button>
<button class="usa-button usa-button--outline usa-button--accent-warm">Accent warm</button>
<button class="usa-button usa-button--outline usa-button--base">Base</button>

Big button
<button class="usa-button usa-button--big">Big button</button>
<button class="usa-button usa-button--big usa-button--outline usa-button--secondary">Big button</button>
<button class="usa-button usa-button--big usa-button--unstyled">Unstyled button</button>

Other button styles <button class="usa-button usa-button--pill">Pill shapped button</button> <button class="usa-button usa-button--small-corners">Button with smaller rounded corners</button> <button class="usa-button usa-button--no-corners">Button with no rounded corners</button>

Custom themed buttons

The custom button theme styles can be used by placing any of the following classes on the .usa-button element:

Class	Examples
`.bg-primary`	.bg-primary `<a class="usa-button bg-primary" href="#primary">.bg-primary</a>`
`.bg-secondary`	.bg-secondary `<a class="usa-button bg-secondary" href="#secondary">.bg-secondary</a>`
`.bg-secondary--alt` `.usa-button--secondary-alt`	.bg-secondary--alt .usa-button--secondary-alt `<a class="usa-button bg-secondary--alt" href="#secondary-alt">.bg-secondary--alt</a> <a class="usa-button usa-button--secondary-alt" href="#secondary-alt">.usa-button--secondary-alt</a>`
`.bg-alternate` `.usa-button--alternate`	.bg-alternate .usa-button--alternate `<a class="usa-button bg-alternate" href="#alternate">.bg-alternate</a> <a class="usa-button usa-button--alternate" href="#alternate">.usa-button--alternate</a>`
`.usa-button--alternate-cool`	.usa-button--alternate-cool `<a class="usa-button usa-button--alternate-cool" href="#alternate-cool">.usa-button--alternate-cool</a>`
`.bg-alternate--warm` `.usa-button--alternate-warm`	.bg-alternate--warm .usa-button--alternate-warm `<a class="usa-button bg-alternate--warm" href="#alternate-warm">.bg-alternate--warm</a> <a class="usa-button usa-button--alternate-warm" href="#alternate-warm">.usa-button--alternate-warm</a>`
`.bg-neutral` `.usa-button--neutral`	.bg-neutral .usa-button--neutral `<a class="usa-button bg-neutral" href="#neutral">.bg-neutral</a> <a class="usa-button usa-button--neutral" href="#neutral">.usa-button--neutral</a>`
`.bg-neutral-light` `.usa-button--neutral-light`	.bg-neutral-light .usa-button--neutral-light `<a class="usa-button bg-neutral-light" href="#neutral-light">.bg-neutral-light</a> <a class="usa-button usa-button--neutral-light" href="#neutral-light">.usa-button--neutral-light</a>`
`.bg-neutral-dark` `.usa-button--neutral-dark`	.bg-neutral-dark .usa-button--neutral-dark `<a class="usa-button bg-neutral-dark" href="#neutral-dark">.bg-neutral-dark</a> <a class="usa-button usa-button--neutral-dark" href="#neutral-dark">.usa-button--neutral-dark</a>`

The <details> element is a disclosure widget which can be used to reveal more contextual information about a topic. The <details> element can be used as replacement for the USWDS accordion component.

It is composed of a <details> container element and an optional <summary> child element. The <summary> content represents a label for the widget. Selecting the <summary> element will reveal the widget's contents. The use of <summary> is optional; however, if it is omitted, the browser will determine the replacement text for controlling the behavior of the details element.

Two attributes can be used to customize the behavior of the <details> element:

Attribute	Description
`open`	When this attribute is present (regardless of its value), then the contents of the `<details>` element will be visible. The attribute can be set to any value for this behavior to occur.
`name`	Groups a collection of details widgets together; so that, opening one widget closes any other grouped widget that is open. The grouped elements must be assigned the same name; i.e., the value of the `name` attribute must be identical. Currently, this behavior is not available natively in Firefox; but is available via a javascript polyfill.

Several classes can be used to customize the appearance of the <details> element:

Class	Description
`project-details--bordered`	Places a border around the content of the `<details>` element when added to the `<details>` element.
`project-details--accordion`	Styles the `<details>` elements to match the accordion component when added to a parent element or the `<details>` element. When placed on a parent element, all child `<details>` elements will inherit the accordion component style. When placed directly on a `<details>` element, only the specific `<details>` element will receive the accordion component style.
`project-details--primary` `project-details--secondary` `project-details--accent-cool` `project-details--accent-warm` `project-details--base` `project-details--base-light`	Used to style a group of `<details>` elements. The theme class can be placed on a parent container or placed on the `<details>` elements to be themed. When placed on a parent element all child `<details>` elements will inherit the theme style.
`details-button--primary` `details-button--secondary` `details-button--accent-cool` `details-button--accent-warm` `details-button--base` `details-button--base-light`	When applied to the `summary` element, alters the color of the specific `summary` element.

Examples

Default
Bordered
Grouped

Themed details

Primary
Secondary
Accent cool
Accent warm
Base
Light base

Basic `<details>`

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.

Code sample

<details>
  <summary>Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Bordered `<details>`

Lorem ipsum

Code sample

<details class="project-details--bordered">
  <summary>Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped by `<name>` attribute

Associated details items

Lorem ipsum

Code sample

<details name="details">
  <summary>Associated details items</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>
<details name="details">
  <summary>Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Primary theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--primary">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--primary">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Secondary theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--secondary">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--secondary">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Accent cool theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--accent-cool">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--accent-cool">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Accent warm theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--accent-warm">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--accent-warm">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Base theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--base">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--base">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Light base theme

Themed summary

Grouped themed details

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.

Code sample

Themed details control
<details>
  <summary class="details-button--base-light">Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>

Grouped themed detail
<div class="project-details--base-light">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
  </details>
</div>

Accordion styled details

Lorem ipsum

Code sample

<div class="project-details--accordion">
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </details>
  <details>
    <summary>Lorem ipsum</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </details>
</div>

Details Controls

A set of buttons to open and close all the details elements grouped together can be added by including the data-show-controls="" attribute to a parent element containing the details to be grouped together. The attribute can be left empty, as the value has no purpose. The appearance of the data-show-controls attribute will trigger the addition of the details controls.

Example

Lorem ipsum

Code sample

<div data-show-controls="">
<details>
  <summary>Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>
<details>
  <summary>Lorem ipsum</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt.</p>
</details>
</div>

External links are indicated by the addition of the link's domain in square brackets ([]) and the external link icon (). These elements are added to links in the main content area by javascript. The script looks for links to domains different from the current one (i.e., not containing orise.orau.gov/cer/rems).

The external link indicators will not be displayed on links containing the usa-button class.

There are a some classes that can alter this behavior:

Class	Description
`is-external-link`	This class will force a link not determined by the script to be external (i.e., a link to a resource located on `orise.orau.gov/cer/rems` not considered to be part of the REMS site) to be treated as an external link placing the domain and image indicators on the link. This class will only display the external link icon () on links containing the `usa-button` class.
`no-external--link`	This class will suppress both the external domain indicator, i.e., the link's domain in square brackets (`[]`) and the external link icon ().
`no-external--domain`	This class will suppress only the external domain indicator, i.e., the link's domain in square brackets (`[]`).
`no-external--img`	This class will suppress only the external link icon ().

The no-external--domain and no-external--img can be combined to remove any indication that the link is external. This will have the same effect as using the no-external--link class.

Examples

External links Internal links Video links

External links

Code sample

<a href="https://www.example.com/">External link</a>
<a class="no-external--link" href="https://www.example.com/">External link (no indicators)</a>
<a class="no-external--img" href="https://www.example.com/">External link (no image)</a>
<a class="no-external--domain" href="https://www.example.com/">External link (no domain)</a>
<a class="usa-button" href="https://www.example.com/">External Link (button)</a>
<a class="site-modal__link" href="https://www.example.com/">External modal link</a>

Internal links

Code sample

<a href="https://orise.orau.gov/cer/rems">Internal link</a>
<a class="is-external-link" href="https://orise.orau.gov/cer/rems">External site (on ORISE domain)</a>

Video links

Code sample

<a href="https://youtu.be/v0nsv1RGzUk?si=SULlV5pqGT2y9sBJ">YouTube video (modal link)</a>
<a class="no-external--link" href="https://youtu.be/v0nsv1RGzUk?si=SULlV5pqGT2y9sBJ">YouTube video (modal link, no indicators)</a>

Lists

The list element (<ul> and <ol>) organizes information into a meaningful grouping or sequence of related items.

USWDS provides the usa-list and usa-list--unstyled classes for styling lists. The usa-list class provides basic list styling, and the usa-list--unstyled class removes all styling from the list.

Alongside the USWDS list classes, there are additional classes to alter the display of lists and the list markers.

List display styles

Several classes are present for altering the display of lists:

Class	Description
`usa-list--compact`	Reduces the whitespace between the individual list items.
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="usa-list--compact"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`
`usa-list--minimal`	Removes the whitespace between the individual list items.
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="usa-list--minimal"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`
`usa-list--collapse-top`	Removes any whitespace that occurs before the list starts.
Example This is a paragraph, perhaps to introduce the list. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<p>This is a paragraph, perhaps to introduce the list.</p> <ul class="usa-list--collapse-top"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`

Alternate list marker styles

Additionally, several classes are present for altering the marker used by unordered lists:

Class	Description
`styled-list--angle`	Replaces the marker with `›`
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="styled-list--angle"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`
`styled-list--dash`	Replaces the marker with `–`
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="styled-list--dash"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`
`styled-list--degree`	Replaces the marker with `°`
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="styled-list--degree"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`
`styled-list--dot`	Replaces the marker with `·`
Example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code sample `<ul class="styled-list--dot"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>`

The tabs component allows the presentation of multiple pieces of information in a single section of a page. The contents of each tab section are shown exclusively when the section's tab control is selected. The name tab is derived from card tabs inserted into paper documents. The basic tab style is based on the design of these card tabs. An alternate style, the block tab, is also available. The tabs for both styles are horizontal by default, but a vertical style for both is also available.

The tabs component is composed of a <div> tag with the class tag-container containing multiple <div> tags representing the sections of the tabs component. Each section must have a unique id attribute and contain a heading (<h1-6> tags) followed by the content to be displayed when the tag section's control is selected. The tab section heading will be the label for the tab control.

Several classes are available to alter the appearance of the the tabs component. These classes must be present on the tag-container element for the alternate style to appear.

Class	Description
`tab-container--block`	Displays the tabs using the block tabs style.
`tab-container--full`	By default the block tab style is narrower than the standard content width. This class overrides this behavior and forces the tabs component to fill the available content space making it full-width. This class will have no effect on the basic tab style.
`tab-container--vertical`	Displays the tabs vertically with the tab content appearing beside the tab controls. This class will alter the tab control placement of both the basic tab style and the block tabs.

Some classes are also available to alter the functionality of the tab controls. These classes must be present on the tab section for which the tab control should exhibit the desired behavior.

Class	Description
`active-tab`	Sets that section's tab control to be the active tab when the tabs component is first rendered. This will have no effect on the first tab since it is active by default.
`disabled-tab`	Disables the corresponding section's tab control, preventing the tab from displaying its content. This class will not have an effect on the first tab.

Examples

Basic tabsBasic tabs, verticalBlock tabsBlock tabs, verticalBlock tabs, fullCustom tabs

Basic tabs

Lorem Ipsum

Maecenas Tristique

Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.

Sed Commodo Neque

Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.

Code sample

<div class="tab-container">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>

Basic tabs, vertical

Lorem Ipsum

Maecenas Tristique

Sed Commodo Neque

Code sample

<div class="tab-container tab-container--vertical">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>

Block tabs

Lorem Ipsum

Maecenas Tristique

Sed Commodo Neque

Code sample

<div class="tab-container tab-container--block">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>

Block tabs, vertical

Lorem Ipsum

Maecenas Tristique

Sed Commodo Neque

Code sample

<div class="tab-container tab-container--block tab-container--vertical">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>

Block tabs

Lorem Ipsum

Maecenas Tristique

Sed Commodo Neque

Code sample

<div class="tab-container tab-container--block tab-container--full">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>

Custom tabs

In this example, the second tag is disabled and the third tab is active by default.

Lorem Ipsum

Maecenas Tristique

Sed Commodo Neque

Code sample

<div class="tab-container">
  <div id="tab-1">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nec quam eu tincidunt. Etiam rutrum magna justo, ut viverra ipsum porta et. In leo velit, efficitur id arcu sed, tincidunt pretium justo. Praesent vel tortor in mi scelerisque egestas. Integer quis magna est. Integer aliquam sit amet eros eget eleifend. Morbi in ullamcorper diam. Suspendisse aliquam facilisis egestas.</p>
  </div>
  <div class="disabled-tab" id="tab-2">
    <h3>Maecenas Tristique</h3>
    <p>Maecenas tristique augue at vehicula molestie. Donec in elit risus. Cras bibendum, diam quis tempus pulvinar, erat purus tristique nibh, non tristique elit ex ut mauris. Proin felis nibh, rutrum bibendum dignissim sed, cursus vel dui. Aliquam erat volutpat. In consequat nunc quis libero gravida ornare. Aliquam vel lorem in libero finibus luctus. Pellentesque vitae augue quam. Integer ac ligula a velit porttitor cursus. Aliquam sed erat fermentum, sagittis tellus id, rutrum lacus. Curabitur faucibus aliquam mi ac pharetra. Donec commodo sem est, eget condimentum nulla eleifend sit amet. Nulla non massa lacus. Pellentesque maximus mauris tellus, scelerisque molestie magna mattis ut. Praesent sodales ante sit amet arcu accumsan, ut interdum orci venenatis. Duis tincidunt scelerisque dolor, ut fringilla ipsum aliquet lobortis.</p>
  </div>
  <div class="active-tab" id="tab-3">
    <h3>Sed Commodo Neque</h3>
    <p>Sed commodo neque mi, et gravida velit fringilla in. Praesent ultrices pellentesque lacus eu porta. Mauris sit amet gravida eros. Mauris accumsan non lacus at suscipit. Sed eget augue finibus, convallis velit id, pulvinar leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel lacus mi.</p>
  </div>
</div>