Skip to main content

Style

Typography and colors used to design this theme.

Typography

Type Example Font Font Size
Display 1 ABCabc Merriweather Sans 4.75 rem
Display 2 ABCabc Merriweather Sans 4.25 rem
Display 3 ABCabc Merriweather Sans 3.75 rem
Display 4 ABCabc Merriweather Sans 3.25 rem
Display 5 ABCabc Merriweather Sans 2.75 rem
Display 6 ABCabc Merriweather Sans 2.25 rem
Heading 1 ABCabc Merriweather 2.25 rem
Heading 2 ABCabc Merriweather 1.75 rem
Heading 3 ABCabc Merriweather 1.5 rem
Heading 4 ABCabc Merriweather 1.25 rem
Heading 5 ABCabc Merriweather 1.15 rem
Heading 6 ABCabc Merriweather 1 rem
Paragraph ABCabc Merriweather Sans 1 rem

Font family

Easily change the font family using .font-serif.

Font Serif

<p class="font-serif">Font Serif</p>

Lead

Make a paragraph stand out by adding .lead.

The quick brown fox jumps over the lazy dog contains all of the letters of the alphabet.

<p class="lead">The quick brown fox...</p>

Links

Links are underlined by default, except when they’re part of specific components.

Link example
<a href="#">Link example</a>

To remove the underline from a link, use .text-decoration-none.

Featured link

Highlight a link adding .link-cta.

Featured link example
<a class="link-cta" href="#">Featured link example</a>

Blockquotes

Add .blockquote for quoting blocks of content from another source.

Lots of designers will use fake copy or lorem ipsum in their wireframes or prototypes.

Someone famous
<blockquote class="blockquote">
<p>Lots of designers will use fake copy or lorem ipsum in their wireframes or prototypes.</p>
<footer class="blockquote-footer">Someone famous</footer>
</blockquote>

Lots of designers will use fake copy or lorem ipsum in their wireframes or prototypes.

Someone famous
<blockquote class="blockquote text-center">
<p>Lots of designers will use fake copy or lorem ipsum in their wireframes or prototypes.</p>
<footer class="blockquote-footer">Someone famous</footer>
</blockquote>

Divider

Add a separator with the .divider class. You can change its color and alignment using utility classes.

Example

<div class="divider mx-auto"></div>

Colors

A color scheme that you can use with a handful of color utility classes.

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark