Modules
Heading
This module helps to create headings of different sizes and colors.
Base #
Basic heading elements have no classes.
Heading 1
Heading 2
Heading 3
Heading 4
<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: 48px 1.2,
h2: 28px 1.3,
h3: 21px 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.
Giga
Mega
Huge
Large
Medium
Small
Micro
Eyebrow
<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-eyebrow">Eyebrow</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-eyebrow">...</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: 21px 1.4,
micro: 16px 1.5,
eyebrow: 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: 64px 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.
Heading Default
Heading Moderated
Heading Muted
Heading Primary
Heading Light
Heading Light Moderated
<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.
The quick brown fox
jumps over
<h2 class="heading-medium">
The quick brown fox
<span class="heading-primary">jumps over</span>
</h2>
You can change the color of heading or add your own color by extending $colors
.
See also how to work with colors for modules.
// =Colors
$colors: map-extend($colors, (
heading: (
muted: palette(black-o, 40),
important: palette(negative, base)
)
));
In the example above, the muted
heading will become more muted.
Also, the new important
heading color will be added.
Superkube will automatically create a heading-important
class specified in $colors
.
Heading Important
<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.
Heading Thin
Heading Normal
Heading Semibold
Heading Heavy
<h2 class="heading-medium heading-thin">...</h2>
<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:
- thin — light or thin weight with font-weight: 300;
- 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.