Heading

Size #

Use the $type map to generate classes for heading sizes.

$type: (
    heading: (
        mega: 72px 1.1,
        large: 48px 1.1,
        medium: 21px 1.4,
        small: 16px 1.5
    )
);

Superkube will generate such classes:

• heading-mega
• heading-large
• heading-medium
• heading-small

<h1 class="heading-mega">...</h1>
<h4 class="heading-small">...</h1>

Responsive typography

Use $type-sm, $type-md, $type-lg maps to set the size of the headings on different screens.

$type-sm: (
    heading: (
        mega: 60px 1.1
    )
);

In this example, the heading with the class heading-mega on small screens will automatically be 60px.

Color #

Superkube generates color classes for headings that are defined in the $colors map. For example this is specified by default:

$colors: (
    ...
    heading: (
        default: palette(black),
        moderated: rgba(palette(black), .7),
        muted: rgba(palette(black), .5),
        light: palette(white),
        light-moderated: rgba(palette(white), .8)
    )
    ...
);

As a result, such classes will be generated:

• heading-moderated
• heading-muted
• heading-light
• heading-light-moderated

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

Note that no class is created for the default color since this color is used to specify the heading color without the class h1, h2 etc. This variable must be in your $colors map.

Of course, the heading size class can be mixed with the color class:

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

Custom heading color

Add a variable to the $colors map to create a heading with your color:

$colors: (
    ...
    heading: (
        ...
        positive: palette(positive, base)
        ...
    )
    ...
);

In this case Superkube will generate a class heading-positive with the specified color.

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