Theme Examples
Accordion with right icon
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Accordion with left icon
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
Alert
Standard alerts
Use appropriate heading level
This is a info alert with an example link.This is a warning alert with an example link.
This is a success alert with an example link.
This is a danger alert with an example link.
Slim alerts
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.
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
Large buttons
Button with icon
Button icons only --solid
Button icons only
Button 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
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.
Carousel
Form Controls
Form controls & type
Heading
h1. heading
h2. heading
h3. heading
h4. heading
h5. heading
h6. heading
Material icons
public
public
public
public
public
public
public
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn moreFluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent..
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
Pagination
Popover
Process 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.
Short alert message. Additional context and followup information including an example link.
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
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 |
| # | 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
Typography
Hello. I'm a little bit of body text. Plain and simple. This is a link
Light text
Semi bold text
Bold text
Bolder text