Buttons

cancel

Labels

Standard Label
Big Label
Label w/ more class
Label w/ background color
Label w/ more class
Label w/ icon
  • Word: Label surrounded by <li>Word</li>

Tables (no component)

Bordered Table

Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863

Borderless Table

Document Title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments MadeA document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863

Alerts

Alert with no Type

Default is information.

Information Type

Informational alert.

Success

Alert denoting successful completion of something.

Warning

Alert denoting something that is important, but not a deal-breaker.

Informational w/ Dismiss

This alert can be dismissed by a logged in user.

Form Controls

Text Inputs

Inline help text
Inline help text
There was an error. Inline help text.

Text areas

Inline help text.
There was an error.Inline help text.

Select

Dropdown

Inline help text.
Inline help text.
There was an error.Inline help text.

Radio

Inline help text.
Inline help text.
There was an error.Inline help text.

Checkbox

Inline help text.
Inline help text.
There was an error.Inline help text.

Checkbox

Date fieldset legend
Inline help text.
Date fieldset legend - pref-filled
Inline help text.
Date fieldset legend - pref-filled
There was an error.Inline help text.

Form Templates

Sign in form

Sign inor create an account
Your registered email address.

Show password

Forgot password?

Sign inor create an account
Invalid email address. Your registered email address.

Show password

Forgot password?

Form Controls

USWDS Search Bars

USWDSX Search Bar w/ filters

Footers

Slim w/ only required keys

Slim w/ all the keys

Medium w/ only required keys

Medium w/ all keys

Big w/ only required keys

Big w/ all keys

Actions

Search Result

Metadata 1: This is a piece of metadata.

This is a sample title

This search result allows actions to be performed.

Metadata 1: This is a piece of metadata.

Metadata 2: This is another piece of metadata.

Resource

Viewing a Single Resource

The search result view inherits from this view. The only difference is that the search result view has a wrapping container for the addition of a border at the bottom. Therefore, the information architecture of both elements is the same.

Metadata 1: This is a piece of metadata.