General UI

Buttons




Button Group



Alerts

Callouts

Info Callout
This is an informational callout. It draws attention with a colored left border.
Success Callout
Everything went according to plan.
Warning Callout
Better check yourself, you're not looking too good.
Danger Callout
Change a few things up and try submitting again.

Badges

Example heading New

Example heading New


Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info

Blockquotes

A well-known quote, contained in a blockquote element.

A centered quote, aligned with utility classes.