Base #

Basic heading elements have no classes.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

They are used within articles, entries, and other blocks of text to create content structure.

<div class="entry-body">
    <h2>...</h2>
    <p>...</p>
    <h3>...</h3>
    <p>...</p>
</div>

Size

By default, the size of the base headings is set in $scales. The first value is the font size, the second value is the line-height parameter.

// =Scales
$scales: (
    type: (
        base: (
            h1: 56px 1.15,
            h2: 28px 1.35,
            h3: 20px 1.4,
            h4: 16px 1.5
        )
    )
);

Note: Superkube has the hierarchy of headings from tag h1 to h4, headings h5 and h6 will have the same size as h4.

You can change the size of the base headings or add your own size by extending $scales. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        base: (
            h1: 60px 1,
            h5: 14px 1.5
        )
    )
));

As a result, the h1 heading will have a 60px font size and added a custom size for the h5 heading.

Responsive

By default, the base headings stay the same size on all screens. If you need to change the heading sizes for different screens, extend the type-sm, type-md, type-lg groups in $scales.

// =Scales
$scales: map-extend($scales, (
    type-sm: (
        base: (
            h1: 40px 1.3
        )
    ),
    type-lg: (
        base: (
            h1: 60px 1
        )
    )
));

In the example above, the h1 heading would be 40px on small screens and 60px on larger screens.

Named #

Named headings have a class of size, color or other styles.

<h1 class="heading-giga">Giga</h1>
<h1 class="heading-mega">Mega</h1>
<h1 class="heading-huge">Huge</h1>
<h2 class="heading-large">Large</h2>
<h3 class="heading-medium">Medium</h3>
<h4 class="heading-small">Small</h4>
<h5 class="heading-micro">Micro</h5>
<h6 class="heading-tagline">Tagline</h6>

Named classes apply to any tag. For example, you can apply heading-giga to h1 tag as well as to h2, h3, etc.

Named headings can be used in any content, in any text. But the best use is in modules and their blocks.

<div class="hero">
    <div class="hero-eyebrow">
        <h6 class="heading-tagline">...</h6>
    </div>
    <div class="hero-head">
        <h1 class="heading-mega">...</h1>
    </div>
    <div class="hero-body">
        <p>...</p>
    </div>
</div>

Size

By default, the size of the named headings is set in $scales. The first value is the font size, the second value is the line-height parameter.

// =Scales
$scales: (
    type: (
        heading: (
            giga: 80px 1.1,
            mega: 64px 1.1,
            huge: 48px 1.2,
            large: 36px 1.2,
            medium: 24px 1.3,
            small: 20px 1.4,
            micro: 16px 1.5,
            tagline: 11px 1.5
        )
    )
);

You can change the size of the named headings or add your own size by extending $scales. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        heading: (
            giga: 100px 1,
            large-z: 32px 1.2
        )
    )
));

In the example above, the heading-giga gets a new font size of 100px and a new heading size large-z is added.

Superkube will automatically create a heading-large-z class specified in $scales.

<h2 class="heading-large-z">...</h2>

Responsive

By default, giga and mega headings change their size on small screens.

// =Scales
$scales: (
    type-sm: (
        heading: (
            giga: 60px 1.1,
            mega: 60px 1.1
        )
    )
);

If you need to change the heading sizes for different screens, extend the type-sm, type-md, type-lg groups in $scales.

// =Scales
$scales: map-extend($scales, (
    type-sm: (
        heading: (
            giga: 56px 1.1
        )
    ),
    type-lg: (
        heading: (
            giga: 120px 1
        )
    )
));

In the example above, the giga heading would be 56px on small screens and 120px on larger screens. Of course, you can specify heading size behavior for all named heading, not just for giga.

Color #

By default, headings have several classes for specifying color.

<h2 class="heading-medium">...</h2>
<h2 class="heading-medium heading-moderated">...</h2>
<h2 class="heading-medium heading-muted">...</h2>
<h2 class="heading-medium heading-primary">...</h2>
<h2 class="heading-medium heading-light">...</h2>
<h2 class="heading-medium heading-light-moderated">...</h2>

The color class can be used inside the heading text to change only part of it.

<h2 class="heading-medium">
    The quick brown fox
    <span class="heading-primary">jumps over the lazy dog</span>
</h2>

You can change the color of heading or add your own color.

// change
.heading-muted {
    --heading-color: var(--palette-black-40),
}

// add
.heading-important {
    --heading-color: var(--palette-negative-base);
}

In the example above, the muted heading will become more muted. Also, the new important heading color will be added.

<h2 class="heading-large heading-important">...</h2>

Style #

In some cases it may be needed to change the style of the heading. To do this simply specify additional heading properties in your SCSS.

.heading-small {
    font-weight: 900;
    letter-spacing: -0.025em;
}

Helpers #

Headings have several helper classes that change the font-weight.

<h2 class="heading-medium heading-normal">...</h2>
<h2 class="heading-medium heading-semibold">...</h2>
<h2 class="heading-medium heading-heavy">...</h2>

That's what each of them means:

• normal — normal font weight;
• semibold — semibold weight with font-weight: 600;
• heavy — heavy or black weight with font-weight: 900.

Note: the font weight classes will not work if they are not in the font you are using in your project.