Heading
The heading component is used to display a heading with the standard DialLink typography styles.
| Install | yarn add @diallink-corp/convergo-react-text |
|---|---|
| Version | 4.1.2 |
| Usage | import {Heading} from '@diallink-corp/convergo-react-text' |
Size and level
The size prop of the heading component defines the size and other styles of the heading. For example,
a level of 1 will display a heading with the h1 tag and size of medium by default.
<ol>
<li>
<Heading level={6} size="small">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={5} size="medium">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={4} size="large">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={3} size="xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={2} size="2xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="3xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading level={6} size="small">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={5} size="medium">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={4} size="large">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={3} size="xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={2} size="2xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="3xlarge">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading
level={6}
size="small"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={5}
size="medium"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={4}
size="large"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={3}
size="xlarge"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={2}
size="2xlarge"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="3xlarge"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
</ol>Weight
The weight prop of the heading component defines the font weight of the heading.
<ol>
<li>
<Heading level={6} size="small" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={5} size="medium" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={4} size="large" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={3} size="xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={2} size="2xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="3xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading level={6} size="small" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={5} size="medium" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={4} size="large" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={3} size="xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={2} size="2xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="3xlarge" weight="light">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading
level={6}
size="small"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={5}
size="medium"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={4}
size="large"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={3}
size="xlarge"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={2}
size="2xlarge"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="3xlarge"
weight="light"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
</ol>Transform
Through the transform prop, the capitalization of the heading can be changed.
<ol>
<li>
<Heading level={1} size="large" transform="lowercase">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="xlarge" transform="capitalize">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading level={1} size="2xlarge" transform="capitalize-first-letter">
one morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading level={1} size="large" transform="lowercase">
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="xlarge"
transform="capitalize"
>
One morning, when Gregor woke from troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="2xlarge"
transform="capitalize-first-letter"
>
one morning, when Gregor woke from troubled dreams
</Heading>
</li>
</ol><ol>
<li>
<Heading
level={1}
size="large"
transform="lowercase"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="xlarge"
transform="capitalize"
>
One morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
<li>
<Heading
level={1}
size="2xlarge"
transform="capitalize-first-letter"
>
one morning, when
Gregor woke from
troubled dreams
</Heading>
</li>
</ol>