Heading
Import Headings
@import 'settings-tools/all-settings';@import 'typography/_t.headings';
Usage
You need to apply at least two classes, the block name and a size.
<p class="mt-heading mt-heading--m">Lorem ipsum...</p>
Variations
Sizes
There is three Headings sizes available. Each heading size rescale its font-size at M and L viewports.
Use the size modifiers in combination with the mt-heading class :
- Small:
mt-heading mt-heading--s - Medium:
mt-heading mt-heading--m - Large:
mt-heading mt-heading--l
| Name | < screen-m (680px) | >= screen-m (680px) | screen-l (1024px) |
|---|---|---|---|
| Heading S | font-scale 0723px (1.4375mu) | font-scale 0828px (1.75mu) | font-scale 0934px (2.125mu) |
| Heading M | font-scale 0828px (1.75mu) | font-scale 0934px (2.125mu) | font-scale 1041px (2.4625mu) |
| Heading L | font-scale 0934px (2.125mu) | font-scale 1041px (2.4625mu) | font-scale 1149px (3.0625mu) |
When using headings in your pages, please keep in mind that the heading component has by default a margin-bottom of 32px with an exception for the Heading L which has a margin-bottom equal to 56px from **breakpoint L.
Font-weights
By default, the font-weight of all headings are set to regular.
Semi-bold an light variations are available by applying the mt-heading--semi-bold or mt-heading--light modifiers.
Underlined headings always have a semi-bold font weight.
Text colors
There are two text colors available for the Headings :
- Darkest (default): (
$color-text-darkest/#000) - Lightest:
mt-heading--lightest($color-text-lightest/#fff) for use within a dark backgrounds.
Underlines
Add underlines by applying the mt-heading--underline modifier.
When using underline, the font weight of the Headings will be semi-bold. Applying a mt-heading--light modifier will have no effect.
You can choose between 4 underline colors. Some of these colors are to be used with titles on a dark background.
Underlines that could be used with a light background
- Default / primary 01:
mt-heading--underline - Primary 02 600:
mt-heading--underline mt-heading--line-primary-02-600(no longer maintened)
Underlines that could be used with a dark background
- Default / primary 01:
mt-heading--underline - primary 01 200:
mt-heading--underline mt-heading--underline-lightest - Primary 02 200:
mt-heading--underline mt-heading--line-primary-02-200(no longer maintened)
Alignment
We provide you with left, right and centered responsive modifiers. As the following example shows, the underlines will align automaticaly with the text when using the alignments modifiers.
mt-heading--centermt-heading--leftmt-heading--right
If you do not use alignments responsive modifiers, the Headings will inherit the context's alignment. But the underlines can only be aligned with the text by using the alignments modifiers.
Responsive Alignment modifiers
| Breakpoint | mt-heading--left | mt-heading--center | mt-heading--right |
|---|---|---|---|
| From breakpoint m | mt-heading--left@from-m | mt-heading--center@from-m | mt-heading--right@from-m |
| From breakpoint l | mt-heading--left@from-l | mt-heading--center@from-l | mt-heading--right@from-l |
| From breakpoint xl | mt-heading--left@from-xl | mt-heading--center@from-xl | mt-heading--right@from-xl |
| From breakpoint xxl | mt-heading--left@from-xxl | mt-heading--center@from-xxl | mt-heading--right@from-xxl |
Line-heights
In case of implementation on short headings (heading on one line); it is possible to use an alternative line-height by using the modifier mt-heading--line-height-xs in order to facilitate the centering (see below).
The line-height xs should be used only for layout puprose. A multiline heading should never use the mt-heading--line-height-xs modifier in any way.