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