Typography

A typography component designed based on MD, providing five type variations, each with three size variations.

Five variants
- Display
- Headline
- Title
- Body
- Label
three sizes
- Large
- Medium
- Small
two types
- default
- emphasized

Import

import "@sandlada/mdc/build/components/typography/typography.js"

Variant

Typography specifies the variant by passing the variant attribute:

Display Large

Display Medium

Display Small

Headline Large

Headline Medium

Headline Small

Title Large

Title Medium

Title Small

Body Large

Body Medium

Body Small

Label Large

Label Medium

Label Small

<mdc-typography variant="display-large" emphasized>
    <div>Display Large</div>
</mdc-typography>
<mdc-typography variant="display-medium" emphasized>
    <div>Display Medium</div>
</mdc-typography>
<mdc-typography variant="display-small" emphasized>
    <div>Display Small</div>
</mdc-typography>

<mdc-typography variant="headline-large" emphasized>
    <div>Headline Large</div>
</mdc-typography>
<mdc-typography variant="headline-medium" emphasized>
    <div>Headline Medium</div>
</mdc-typography>
<mdc-typography variant="headline-small" emphasized>
    <div>Headline Small</div>
</mdc-typography>

<mdc-typography variant="title-large" emphasized>
    <div>Title Large</div>
</mdc-typography>
<mdc-typography variant="title-medium" emphasized>
    <div>Title Medium</div>
</mdc-typography>
<mdc-typography variant="title-small" emphasized>
    <div>Title Small</div>
</mdc-typography>

<mdc-typography variant="body-large" emphasized>
    <div>Body Large</div>
</mdc-typography>
<mdc-typography variant="body-medium" emphasized>
    <div>Body Medium</div>
</mdc-typography>
<mdc-typography variant="body-small" emphasized>
    <div>Body Small</div>
</mdc-typography>

<mdc-typography variant="label-large" emphasized>
    <div>Label Large</div>
</mdc-typography>
<mdc-typography variant="label-medium" emphasized>
    <div>Label Medium</div>
</mdc-typography>
<mdc-typography variant="label-small" emphasized>
    <div>Label Small</div>
</mdc-typography>

Emphasized