Import Headings

@import 'settings-tools/all-settings';
@import 'typography/_t.headings';


Keep in mind

You need to apply at least two classes, the block name and a size.

<p class="mt-heading mt-heading--m">Lorem ipsum...</p>



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 Sfont-scale 07
23px (1.4375mu)
font-scale 08
28px (1.75mu)
font-scale 09
34px (2.125mu)
Heading Mfont-scale 08
28px (1.75mu)
font-scale 09
34px (2.125mu)
font-scale 10
41px (2.4625mu)
Heading Lfont-scale 09
34px (2.125mu)
font-scale 10
41px (2.4625mu)
font-scale 11
49px (3.0625mu)
Default margin

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.


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.


Add underlines by applying the mt-heading--underline modifier.

Important note

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)


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--center
  • mt-heading--left
  • mt-heading--right
Keep in mind

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

From breakpoint mmt-heading--left@from-mmt-heading--center@from-mmt-heading--right@from-m
From breakpoint lmt-heading--left@from-lmt-heading--center@from-lmt-heading--right@from-l
From breakpoint xlmt-heading--left@from-xlmt-heading--center@from-xlmt-heading--right@from-xl
From breakpoint xxlmt-heading--left@from-xxlmt-heading--center@from-xxlmt-heading--right@from-xxl


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.