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

Primary background
Primary background 75% opacity
Primary background 50% opacity
Primary background 25% opacity
Primary background 10% opacity
Secondary background
Secondary background 75% opacity
Secondary background 50% opacity
Secondary background 25% opacity
Secondary background 10% opacity
Info background
Info background 75% opacity
Info background 50% opacity
Info background 25% opacity
Info background 10% opacity
Success background
Success background 75% opacity
Success background 50% opacity
Success background 25% opacity
Success background 10% opacity
Warning background
Warning background 75% opacity
Warning background 50% opacity
Warning background 25% opacity
Warning background 10% opacity
Danger background
Danger background 75% opacity
Danger background 50% opacity
Danger background 25% opacity
Danger background 10% opacity

Buttons

Default style & state

Outline style

Disabled state

Sizes


With icons




Badges

Default

Primary Secondary Info Success Danger Warning Light Dark

Default outlined

Primary Secondary Info Success Danger Warning Light Dark

Pill

Primary Secondary Info Success Danger Warning Light Dark

Pill outlined

Primary Secondary Info Success Danger Warning Light Dark

Faded default

Primary Secondary Info Success Danger Warning Light Dark

Faded pill

Primary Secondary Info Success Danger Warning Light Dark

Micro default

Primary Secondary Info Success Danger Warning Light Dark

Micro pill

Primary Secondary Info Success Danger Warning Light Dark

Micro faded default

Primary Secondary Info Success Danger Warning Light Dark

Micro faded pill

Primary Secondary Info Success Danger Warning Light Dark

Alerts

Default

Compact

With icons


Tooltips


Shadows

.shadow-sm
.shadow
.shadow-lg
.smooth-shadow-sm
.smooth-shadow
.smooth-shadow-lg

Cards

Vertical card

Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Go somewhere
Card with header and footer

Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Go somewhere
Horizontal card

Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.

Go somewhere

List 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 badges

  1. First
    Content for list item
    14
  2. Second
    Content for list item
    8
  3. Third
    Content for list item
    199

Accordion

Nullam quis ante. Phasellus ullamcorper ipsum rutrum nunc. Sed fringilla mauris sit amet nibh. Quisque rutrum. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Aliquam erat volutpat. Vestibulum fringilla pede sit amet augue. Etiam ut purus mattis mauris sodales aliquam.

Nullam quis ante. Phasellus ullamcorper ipsum rutrum nunc. Sed fringilla mauris sit amet nibh. Quisque rutrum. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Aliquam erat volutpat. Vestibulum fringilla pede sit amet augue. Etiam ut purus mattis mauris sodales aliquam.

Nullam quis ante. Phasellus ullamcorper ipsum rutrum nunc. Sed fringilla mauris sit amet nibh. Quisque rutrum. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Aliquam erat volutpat. Vestibulum fringilla pede sit amet augue. Etiam ut purus mattis mauris sodales aliquam.

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

Carrello

Nessun prodotto nel carrello.