Cirrus

#Headings

Updated
0.7.0

These classes style the font of the heading elements.

#Examples

Cirrus styles the standard header tags h1, h2, h3, h4, h5, h6 with font sizes ranging from 4rem to 1rem where each rem is 16px. Cirrus allows you to choose between two fonts: Montserrat and Nunito Sans by specifying the font weight of the headers. Simply add the font-alt font-light class to your headings to use Nunito Sans and leave it as is to use Montserrat.

Standard headings:

this is h1h1 3rem (48px)

this is h2h2 2.5rem (40px)

this is h3h3 2rem (32px)

this is h4h4 1.75rem (24px)

this is h5h5 1.5rem (16px)
this is h6h6 1.25rem (12px)
Light headings:

this is h1h1 3rem (48px)

this is h2h2 2.5rem (40px)

this is h3h3 2rem (32px)

this is h4h4 1.75rem (24px)

this is h5h5 1.5rem (16px)
this is h6h6 1.25rem (12px)
<h1 class="uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h2>
<h3 class="uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h3>
<h4 class="uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h4>
<h5 class="uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h5>
<h6 class="uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h6>
<h1 class="font-alt font-light uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="font-alt font-light uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h2>
<h3 class="font-alt font-light uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h3>
<h4 class="font-alt font-light uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h4>
<h5 class="font-alt font-light uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h5>
<h6 class="font-alt font-light uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h6>

#Headline

Headlines are just bigger versions of headings.

headline-1headline-1 6.5rem (104px)

headline-2headline-2 5.5rem (88px)

headline-3headline-3 4.5rem (72px)

headline-4headline-4 3.5rem (56px)

<h1 class="headline-1 uppercase"> <b>headline-1</b><span class="desc"><code>headline-1</code> 6.5rem (104px)</span></h1>
<h1 class="headline-2 uppercase"> <b>headline-2</b><span class="desc"><code>headline-2</code> 5.5rem (88px)</span></h1>
<h1 class="headline-3 uppercase"> <b>headline-3</b><span class="desc"><code>headline-3</code> 4.5rem (72px)</span></h1>
<h1 class="headline-4 uppercase"> <b>headline-4</b><span class="desc"><code>headline-4</code> 3.5rem (56px)</span></h1>

#Variants

The classes specified above are the default utility classes for setting heading font sizes. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        fonts: (
            sizes: (
                heading: (
                    // Replace h1 font size for sm-above
                    h1: (
                        sm-only: (
                            font-size: 5rem,
                        ),
                    ),

                    // Create a new entry (h7 doesn't technically exist but it's ok)
                    h7: (
                        default: (
                            font-size: .5rem,
                        ),
                        sm-above: (
                            font-size: .6rem,
                        )
                    )
                ),
            ),
        ),
    ),
) !default;

This would generate the following additional classes.

h1 {
    font-size: 5rem;
    letter-spacing: 0.025rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h7 {
    font-size: 0.6rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Other viewport variants... */

Headlines can also be extended.

// _config.scss
$config: (
    extend: (
        fonts: (
            sizes: (
                headline: (
                    headline-5: (
                        default: (
                            font-size: 2rem,
                        ),
                        sm-above: (
                            font-size: 2.5rem,
                        ),
                    ),
                ),
            ),
        ),
    ),
) !default;
.headline-5 {
    font-size: 2.5rem;
    letter-spacing: 0.05rem;
}

@media screen and (max-width: 639px) {
    .headline-5 {
        font-size: 2.5rem;
        letter-spacing: 0.05rem;
    }
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.