Paragraph

A paragraph or title of text.

If this paragraph is a heading (using one of the h# properties), and it has an ID, it will receive a "link" button on hover that will navigate to that heading.

In many cases, this can replace Joy UI's Typography component, however, you may still use Typography for purposes not served by this component.

Props

The same as Joy UI's Typography component, as well as:

body or sidenote or box or h1 or h2 or h3 or h4 or h5 or h6: A boolean that indicates whether the text is a body or a sidenote or a heading. The special value block can be used for more complex layouts where a margin is not wanted (eg. flexbox children in custom layouts), similar to Joy UI's Box or HTML <div>.

Examples

Block text

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet sit amet cursus sit amet dictum sit amet. Nisl vel pretium lectus quam id leo in vitae turpis.

Senectus et netus et malesuada fames ac turpis egestas. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Et tortor at risus viverra adipiscing at in tellus integer.

Consectetur dolor

Auctor urna nunc id cursus. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Leo vel fringilla est ullamcorper eget. Netus et malesuada fames ac.

Ullamcorper scelerisque

Orci a scelerisque purus semper eget duis at tellus at. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Elementum nibh tellus molestie nunc non blandit massa.

Laoreet suspendisse interdum consectetur libero id faucibus nisl. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat.

1<Paragraph h1 id="lorem-ipsum-dolor">
2  Lorem Ipsum Dolor
3</Paragraph>
4<Paragraph body>
5  {...}
6</Paragraph>
7<Paragraph body>
8  {...}
9</Paragraph>
10<Paragraph h2 id="consectetur-dolor">
11  Consectetur dolor
12</Paragraph>
13<Paragraph body>
14  {...}
15</Paragraph>
16<Paragraph h2 id="ullamcorper-dolor">
17  Ullamcorper scelerisque
18</Paragraph>
19<Paragraph body>
20  {...}
21</Paragraph>
22<Paragraph sidenote>
23  {...}
24</Paragraph>