Typography
Typography allows you to present your content in a clear and legible manner.
Sass
// Include default styles without configuration
@forward '@miraidesigns/typography/styles';// Configure appearance
@use '@miraidesigns/typography' with (
$variable: value
);
@include typography.styles();Implementation
It is necessary to properly configure this module and I recommend to load it early in the load order.
Please configure the _variables.scss file and the load() mixin found in _mixins.scss responsible for loading the fonts.
Fonts
Fonts are split into three groups.
Regular is the main font used for elements, paragraphs, inputs, general writing and so on.
Headline is the secondary font used for headings and other emphasis driven text.
Code is used for <pre> and <code> blocks and other systematic text applications.
Each style can also be applied through classes.
| Name | Class |
|---|---|
| Regular | mdf-font-regular |
| Headline | mdf-font-headline |
| Code | mdf-font-code |
Headlines
Headlines are the largest text reserved for short headings that attract the users attention.
| Heading type | Element | Class |
|---|---|---|
| Headline 1 | <h1> |
mdf-headline-1 |
| Headline 2 | <h2> |
mdf-headline-2 |
| Headline 3 | <h3> |
mdf-headline-3 |
| Headline 4 | <h4> |
mdf-headline-4 |
| Headline 5 | <h5> |
mdf-headline-5 |
| Headline 6 | <h6> |
mdf-headline-6 |
Subtitles
Subtitles are usually smaller than headlines and best if kept short and descriptive.
| Subtitle type | Class |
|---|---|
| Subtitle 1 | mdf-subtitle-1 |
| Subtitle 2 | mdf-subtitle-2 |
Captions
Captions are usually the smallest text and describe headlines or media elements like images.
| Subtitle type | Class |
|---|---|
| Caption | mdf-caption |