Template UI

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

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 Light
Primary Light 75% opacity
Primary Light 50% opacity
Primary Light 25% opacity
Primary Light 10% opacity
Primary
Primary 75% opacity
Primary 50% opacity
Primary 25% opacity
Primary 10% opacity
Primary Dark
Primary Dark 75% opacity
Primary Dark 50% opacity
Primary Dark 25% opacity
Primary Dark 10% opacity
Primary Darker
Primary Darker 75% opacity
Primary Darker 50% opacity
Primary Darker 25% opacity
Primary Darker 10% opacity
Secondary
Secondary 75% opacity
Secondary 50% opacity
Secondary 25% opacity
Secondary 10% opacity
Secondary Dark
Secondary Dark 75% opacity
Secondary Dark 50% opacity
Secondary Dark 25% opacity
Secondary Dark 10% opacity
Info
Info 75% opacity
Info 50% opacity
Info 25% opacity
Info 10% opacity
Success
Success 75% opacity
Success 50% opacity
Success 25% opacity
Success 10% opacity
Warning
Warning 75% opacity
Warning 50% opacity
Warning 25% opacity
Warning 10% opacity
Danger
Danger 75% opacity
Danger 50% opacity
Danger 25% opacity
Danger 10% opacity

Buttons

Default

Outline

Disabled

Sizes

With icons

Badges

Default

Primary Secondary Info Success Warning Danger Light Dark

Default outlined

Primary Secondary Info Success Warning Danger Light Dark

Pill

Primary Secondary Info Success Warning Danger Light Dark

Pill outlined

Primary Secondary Info Success Warning Danger Light Dark

Faded

Primary Secondary Info Success Warning Danger Light Dark

Faded pill

Primary Secondary Info Success Warning Danger Light Dark

Micro

Primary Secondary Info Success Warning Danger Light Dark

Micro pill

Primary Secondary Info Success Warning Danger Light Dark

Micro faded

Primary Secondary Info Success Warning Danger Light Dark

Micro faded pill

Primary Secondary Info Success Warning Danger Light Dark

Alerts

Default

Compact

With icons

Alert boxes

Primary color alert box.

Secondary color alert box.

Info color alert box.

Success color alert box.

Warning color alert box.

Danger color alert box.

Light color alert box.

Dark color alert box.

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

Occaecat ea tempor ut labore minim minim aliquip est tempor. Enim sit amet minim pariatur in veniam aliquip enim excepteur laborum aliqua.

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

Go somewhere
Vestibulum ullamcorper mauris
Horizontal card

Qui pariatur Lorem laboris amet. Cillum nostrud sit cupidatat incididunt amet. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus.

Go somewhere
Card with navigation tabs

First Tab

Occaecat ea tempor ut labore minim minim aliquip est tempor. Enim sit amet minim pariatur in veniam aliquip enim excepteur laborum aliqua. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Go somewhere

Second Tab

Occaecat ea tempor ut labore minim minim aliquip est tempor. Enim sit amet minim pariatur in veniam aliquip enim excepteur laborum aliqua. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Go somewhere

Third Tab

Occaecat ea tempor ut labore minim minim aliquip est tempor. Enim sit amet minim pariatur in veniam aliquip enim excepteur laborum aliqua. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Go somewhere
Vestibulum ullamcorper mauris

List groups

Simple

  • A disabled item
  • An active item
  • A third item
  • A fourth item
  • A fifth item

Variants

  • Primary list group item
  • Secondary list group item
  • Info list group item
  • Success list group item
  • Warning list group item
  • Danger list group item
  • Light list group item
  • Dark list group item

With links

The current link item A second link item A third link item A fourth link item A disabled link 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.

Tables

Striped

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry Bird @twitter
3 Michael Jordan @epic

Compact and bordered

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry Bird @twitter

Color variants on rows

# Color
1 Primary
2 Secondary
3 Info
4 Success
5 Warning
6 Danger

Forms

Sizes

Input groups

Small €
Default €
Large €

Switches

Labels

Ut non enim eleifend felis pretium feugiat. Nulla facilisi. Phasellus dolor. Praesent vestibulum dapibus nibh.

Grid elements

Please note that classes must be specified for every breakpoint to avoid a broken layout (narrower breakpoints can be omitted if theres no need to change the default 100% width)

Example with these classes applied: grid-results-sm-1 grid-results-md-2 grid-results-lg-2 grid-results-xl-4 grid-results-xxl-4

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

Example with these classes applied: grid-results-lg-3 grid-results-xl-4 grid-results-xxl-8

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

CTA with modal lead form

Block Editor