test

Theme Examples

Sample Title

Insert body here...

Sample Title

Insert body here...

Sample Title

Insert body here...

Sample Title

Insert body here...

Alert

Standard alerts

info

Use appropriate heading level

This is a info alert with an example link.
warning
This is a warning alert with an example link.
check_circle
This is a success alert with an example link.
error
This is a danger alert with an example link.

Slim alerts

info
This is a small info alert with an example link.

Alerts with no icons

This is a info regular alert with an example link.
This is a info slim alert with an example link.
info

Use appropriate heading level

This is a primary alert with an example link.

Inline informational alerts

Information

This is an inline informational message with an example link.

Success

This is an inline informational message with an example link.

Warning

This is an inline informational message with an example link.

Danger

This is an inline informational message with an example link.

Badges

Contextual variations

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

Links badges

Primary Secondary Success Danger Warning Info Light Dark

Subtle badges

Primary Secondary Success Danger Warning Info Light Dark

Default Breadcrumb

  1. Home
  2. Library
  3. Long list of item
  4. Another long list of item

Wrapping Breadcrumb

  1. Home
  2. Library
  3. Long list of item
  4. Another long list of item

Button & Groups

PrimaryDangerSecondaryInfo
SuccessWarningLightDark

Disabled buttons

DisabledDisabled

Large buttons

LargeLink
LeftMiddleRight
LeftMiddleRight

Button with icon

search Searchsearch Searchsearch Search

Button icons only --solid

search Searchsearch Searchsearch Search

Button icons only

search Searchsearch Searchsearch Search
ButtonButtonButtonButtonButtonButton

Button outline

PrimaryDisabled
SecondarySuccessDangerWarningInfoDark
Light

Card

Standard layout

Card title1
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Button in footer
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card Title -USWDS

Some quick example text to build on the card title and make up the bulk of the card's content.

Button in footer

Card Title -USWDS

Some quick example text to build on the card title and make up the bulk of the card's content.

Button in footer

Optional layout

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card sub title

Some quick example text to build on the card title and make up the bulk of the card's content.

Form Controls

@
https://example.com/users/
search
$ .00
@
With textarea
Email address
Email address - Valid with icon
Email address - Invalid with icon
Email address - Valid
Email address - Invalid

Form controls & type

Example select 12345
Example custom select Open this select menuOneTwoThree
Example multiple select 12345

Default checkboxes

Default checkbox checked
Default checkbox unchecked
Disabled checkbox
Disabled checkbox

Default radio buttons

Default radio checked
Default radio unchecked
Disabled radio
Disabled radio
Appointment date
mm/dd/yyyy
Select a fruit
Select a fruitAppleApricotAvocadoBananaBlackberryBlood orangeBlueberryBoysenberryBreadfruitBuddha's hand citronCantaloupeClementineCrab appleCurrantCherryCustard appleCoconutCranberryDateDragonfruitDurianElderberryFigGooseberryGrapeGrapefruitGuavaHoneydew melonJackfruitKiwifruitKumquatLemonLimeLycheeMandarineMangoMangosteenMarionberryNectarineOrangePapayaPassionfruitPeachPearPersimmonPlantainPlumPineapplePluotPomegranatePomeloQuinceRaspberryRambutanSoursopStarfruitStrawberryTamarindTangeloTangerineUgli fruitWatermelonWhite currantYuzu
Example textarea
Dropdown button

Heading

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

Multi-step navigation

List & groups

  • Dapibus ac facilisis in
  • Cras justo odio
  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Porta ac consectetur ac

Modal

Launch demo modal

Pagination

Tooltip

Tooltip on topTooltip on rightTooltip on bottomTooltip on left

Process list

Default

  1. Start a process

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
    • Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
    • Aliquam erat volutpat. Sed quis velit.

  2. Proceed to the second step

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  3. Complete the step-by-step process

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

Not text

  1. Start a process.

  2. Proceed to the second step.

  3. Complete the step-by-step process.

Progress

25%

Scrollbar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus, necessitatibus accusantium! Delectus ea corrupti culpa ut exercitationem, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, mollitia assumenda? Ratione, tenetur similique ipsam voluptate, nihil dolorem nam quam ipsa ducimus?

Site alert

error

Emergency alert message

Additional context and followup information including an example link.

error

Emergency alert message

  • The primary emergency message and a link for supporting context.
  • Another message, and another link.
  • A final emergency message.

error
Short alert message. Additional context and followup information including an example link.

Step indicator

Default

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

No labels

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Centered

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Small counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Summary box

Key information

Tabs

Nulla est ullamco ut irure incididunt nulla
Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum
Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi.

Table

Default table without border
# Column Column Column Column
1 Content Content Content Content
2 Content Content Content Content
3 Content Content Content Content
Default table with border
# Column Column Column Column
1 Content Content Content Content
2 Content Content Content Content
3 Content Content Content Content
Condensed table with border
# Column Column Column Column
1 Content Content Content Content
2 Content Content Content Content
3 Content Content Content Content
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Column Column Column Column
1 Content Content Content Content
2 Content Content Content Content
3 Content Content Content Content
4 Content Content Content Content
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tooltip

Tooltip on topTooltip on rightTooltip on bottomTooltip on left

Typography

Hello. I'm a little bit of body text. Plain and simple. This is a link

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Was this information helpful?