Style

Typography and colors used to style this theme.

Typography

Type Example Font Font Size
Display 1

ABCabc

Merriweather Sans 4.5 rem
Display 2

ABCabc

Merriweather Sans 3.75 rem
Display 3

ABCabc

Merriweather Sans 3.25 rem
Display 4

ABCabc

Merriweather Sans 2.75 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

Note: The theme has the responsive font size option enabled, allowing the text to scale more naturally across viewport sizes.

Font family

Easily change the font family using .font-serif and .font-sans-serif.

Font Sans Serif

Font Serif

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

Divider

Add a .sep class to the hr element to convert it to a short, 2 pixels width separator. Then you can change its color and alignment using utility classes.

Example

            
                <p class="h3">Example</p>
                <hr role="presentation" class="border-primary sep text-left ml-0">
            
        

Important: Include the role="presentation" attribute to indicate to screen readers that is a decorative element.

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

            
                <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            
        

Links

Links inside paragraphs are underlined. It ensures link visibility when users scan a text and also facilitates link identification for color-blind users.

If you need to underline a link that is not included in a paragraph, you can use the <u> tag.

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.

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Someone famous
            
                <blockquote class="blockquote">
                    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                    <footer class="blockquote-footer">Someone famous</footer>
                </blockquote>
            
        

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Someone famous
            
                <blockquote class="blockquote text-center">
                    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                    <footer class="blockquote-footer">Someone famous</footer>
                </blockquote>
            
        

Bootstrap Documentation

Colors

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

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark

Bootstrap Documentation