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
Use appropriate heading level
This is a info alert with an example link.Slim alerts
Alerts with no icons
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 DarkPill badges
Primary Secondary Success Danger Warning Info Light DarkLinks badges
Primary Secondary Success Danger Warning Info Light DarkSubtle badges
Primary Secondary Success Danger Warning Info Light DarkDefault Breadcrumb
Wrapping Breadcrumb
Button & Groups
Disabled buttons
DisabledDisabledLarge buttons
LargeLinkButton with icon
search Searchsearch Searchsearch SearchButton icons only --solid
search Searchsearch Searchsearch SearchButton icons only
search Searchsearch Searchsearch SearchButton outline
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
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.

Card Title -USWDS
Some quick example text to build on the card title and make up the bulk of the card's content.
Optional layout
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
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
Form controls & type
Default checkboxes
Default radio buttons
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 modalPagination
Tooltip
Tooltip on topTooltip on rightTooltip on bottomTooltip on leftProcess list
Default
-
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.
-
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.
-
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
-
Start a process.
-
Proceed to the second step.
-
Complete the step-by-step process.
Progress
Scrollbar
Site alert
Emergency alert message
Additional context and followup information including an example link.Emergency alert message
- The primary emergency message and a link for supporting context.
- Another message, and another link.
- A final emergency message.
Step indicator
Default
- Personal information completed
- Household status completed
- Supporting documents
- Signature not completed
- Review and submit not completed
Step 3 of 5 Supporting documents
No labels
- Personal information completed
- Household status completed
- Supporting documents
- Signature not completed
- Review and submit not completed
Step 3 of 5 Supporting documents
Centered
- Personal information completed
- Household status completed
- Supporting documents
- Signature not completed
- Review and submit not completed
Step 3 of 5 Supporting documents
Counters
- Personal information completed
- Household status completed
- Supporting documents
- Signature not completed
- Review and submit not completed
Step 3 of 5 Supporting documents
Small counters
- Personal information completed
- Household status completed
- Supporting documents
- Signature not completed
- Review and submit not completed
Step 3 of 5 Supporting documents
Summary box
Key information
- If you are under a winter storm warning, find shelter right away.
- Sign up for your community’s warning system.
- Learn the signs of, and basic treatments for frostbite and hypothermia.
- Gather emergency supplies for your home and your car.
Tabs
Table
# | Column | Column | Column | Column |
---|---|---|---|---|
1 | Content | Content | Content | Content |
2 | Content | Content | Content | Content |
3 | Content | Content | Content | Content |
# | Column | Column | Column | Column |
---|---|---|---|---|
1 | Content | Content | Content | Content |
2 | Content | Content | Content | Content |
3 | Content | Content | Content | Content |
# | 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 |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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 |
# | 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 |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Tooltip
Tooltip on topTooltip on rightTooltip on bottomTooltip on leftTypography
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