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.

<h1 class="heading-super">Super</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 submodules.

<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: (
            super: 80px 1.1,
            giga: 64px 1.1,
            mega: 48px 1.1,
            huge: 40px 1.2,
            large: 32px 1.2,
            medium: 24px 1.3,
            small: 20px 1.3,
            micro: 16px 1.4,
            tagline: 11px 1.4
        )
    )
);

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 components and modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        heading: (
            giga: 120px 1,
            xsmall: 22px 1.4
        )
    )
));

In the example above, the heading-giga gets a new font size of 120px and a new heading size xsmall is added.

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

<h2 class="heading-xsmall">...</h2>

Responsive

By default, some headings change their size on small screens.

// =Scales
$scales: (
    type-sm: (
        heading: (
            giga: 52px 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: 48px 1.2
        )
    ),
    type-lg: (
        heading: (
            giga: 120px 1
        )
    )
));

In the example above, the giga heading would be 48px 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-dark-mid">...</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-mid">...</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 by extending $colors map.

// =Colors
$colors: map-extend($colors, (
    heading: (
        muted: var(--palette-black-40),
        important: var(--palette-red-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>

Gradient #

You can add a heading gradient by extending $colors map.

// =Colors
$colors: map-extend($colors, (
    heading: (
        gradient-primary: linear-gradient(90deg, var(--palette-green-base), var(--palette-blue-base))
    )
));

Superkube will automatically create a class with the gradient color.

<h2 class="heading-large heading-gradient-primary">...</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.

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--heading-font-size: {value};
--heading-line-height: {value};
--heading-color: {value};