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.
<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.
<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.
<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.