Hero styles

Base text classes

Base typography classes does not apply any external margins nor font-colors, because they are contextuals. This mean that color and margins will be either inherited or applied through new classes set on your dom elements, depending on their position and usage.

You can import all base typography scss files by importing the _a.all-base-typography sub-bundle from the atoms directory


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

Hero classes

Default lines-height for Hero is set to M, witch correspond to a ratio close to 1.35. Hero classe come with a modifier to set the font-weight to 'semi bold' and a modifier to use an alternative S line-height. Hero atoms have multiple changes of font-size across viewport.

Import Hero atom


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

usage


<p class="mt-hero">Lorem ipsum...</p>
<p class="mt-hero mt-hero--semi-bold">Lorem ipsum...</p>
<p class="mt-hero mt-hero--line-height-s">Lorem ipsum...</p>
<p class="mt-hero mt-hero--line-height-s mt-hero--semi-bold">
  Lorem ipsum...
</p>

Viewport < M (680px) :

Class names	font-size	line-height	weight
`.mt-hero`	`09` : 34px (2.125mu )	`M` : 44px (2.75mu)	regular
`.mt-hero .mt-hero--semi-bold`	`09` : 34px (2.125mu )	`M` : 44px (2.75mu)	semi bold
`.mt-hero .mt-hero--line-height-s`	`09` : 34px (2.125mu )	`S` : 40px (2.5mu)	regular

Viewport >= M (680px) :

Class names	font-size	line-height	weight
`.mt-hero`	`10` : 41px (2.5625mu)	`M` : 56px (3.5mu)	regular
`.mt-hero .mt-hero--semi-bold`	`10` : 41px (2.5625mu)	`M` : 56px (3.5mu)	semi bold
`.mt-hero .mt-hero--line-height-s`	`10` : 41px (2.5625mu)	`S` : 48px (3mu)	regular

Viewport >= L (1024px) :

Class names	font-size	line-height	weight
`.mt-hero`	`11` : 49px (3.0625mu)	`M` : 68px (4.25mu)	regular
`.mt-hero .mt-hero--semi-bold`	`11` : 49px (3.0625mu)	`M` : 68px (4.25mu)	semi bold
`.mt-hero .mt-hero--line-height-s`	`11` : 49px (3.0625mu)	`S` : 56px (3.5mu)	regular

Viewport >= XL-MEDIUM (1440px) :

Class names	font-size	line-height	weight
`.mt-hero`	`12` : 59px (3.6875mu)	`M` : 80px (5mu)	regular
`.mt-hero .mt-hero--semi-bold`	`12` : 59px (3.6875mu)	`M` : 80px (5mu)	semi bold
`.mt-hero .mt-hero--line-height-s`	`12` : 59px (3.6875mu)	`S` : 68px (4.25mu)	regular