Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading with muted text
Text sizes
Lead font size text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Default font size text. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, Sed a libero. Nullam tincidunt adipiscing enim. Sed cursus turpis vitae tortor. at malesuada velit leo quis pede. Pellentesque ut neque. Duis leo. Etiam sit amet orci eget eros faucibus tincidunt.
Small font size text. Curabitur turpis. Ut id nisl quis enim dignissim sagittis. Etiam sit amet orci eget eros faucibus tincidunt.
Extra small font size text. Curabitur turpis. Ut id nisl quis enim dignissim sagittis. Etiam sit amet orci eget eros faucibus tincidunt.
Text colors
Text muted. Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Text primary. Nullam id dolor id nibh ultricies vehicula ut id elit.
Text secondary. Nullam id dolor id nibh ultricies vehicula ut id elit.
Text info. Maecenas sed diam eget risus varius blandit sit amet non magna.
Text success. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Text warning. Etiam porta sem malesuada magna mollis euismod.
Text danger. Donec ullamcorper nulla non metus auctor fringilla.
Display font size 1.
Display font size 2.
Display font size 3.
Display font size 4.
Display font size 5.
Background colors
Buttons
Default style & state
Outline style
Disabled state
Sizes
With icons
Badges
Default
Primary Secondary Info Success Danger Warning Light DarkDefault outlined
Primary Secondary Info Success Danger Warning Light DarkPill
Primary Secondary Info Success Danger Warning Light DarkPill outlined
Primary Secondary Info Success Danger Warning Light DarkFaded default
Primary Secondary Info Success Danger Warning Light DarkFaded pill
Primary Secondary Info Success Danger Warning Light DarkMicro default
Primary Secondary Info Success Danger Warning Light DarkMicro pill
Primary Secondary Info Success Danger Warning Light DarkMicro faded default
Primary Secondary Info Success Danger Warning Light DarkMicro faded pill
Primary Secondary Info Success Danger Warning Light DarkAlerts
Default
Compact
With icons
Primary color alert. A simple info alert with an example link.
Secondary color alert. A simple info alert with an example link.
Success color alert. A simple info alert with an example link.
Danger color alert. A simple info alert with an example link.
Warning color alert. A simple info alert with an example link.
Info color alert. A simple info alert with an example link.
Light color alert. A simple info alert with an example link.
Dark color alert. A simple info alert with an example link.
Tooltips
Shadows
Cards
Vertical card
Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
Go somewhereCard with header and footer
Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
Go somewhereHorizontal card
Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.
Go somewhereList groups
Simple
- A disable item
- An active item
- A third item
- A fourth item
- A fifth item
Variants
- Primary list group item
- Secondary list group item
- Success list group item
- Danger list group item
- Warning list group item
- Info list group item
- Light list group item
- Dark list group item
With links
With badges
-
FirstContent for list item
-
SecondContent for list item
-
ThirdContent for list item
Accordion
block-group
default
block-columns 50/50
default
block-columns 50/50
default
block-group
alignwide
block-columns 50/50
default
block-columns 50/50
default
block-group
alignfull
block-columns 50/50
default
block-columns 50/50
default
block-columns 50/50
default
block-columns 50/50
default
block-columns 50/50
alignwide
block-columns 50/50
alignwide
block-columns 50/50
alignfull
block-columns 50/50
alignfull