By default, the paragraph component should provide consistent values for font-size, line-height, and margin-bottom across themes.
Paragraphs are distinct sections of content, typically dealing with a single theme, and are indicated by a new line. Paragraphs are often used for a majority of text on the page and should be able to support a variety of information-dense layouts.
Paragraph text should be legible, and easy to read. It should also provide a clear amount of space beneath a block of text to visually separate itself from adjacent content.
- Breaking content up into paragraphs helps screen readers and assistive technology provide shortcuts for users to skip between them
- Paragraph text should meet AA requirements (4.5:1) for color contrast from itself and the background color
Paragraphs should be used for most text blocks. Paragraphs provide defaults for font-size, line-height, and margin-bottom. Paragraphs can be used within other components as well. Typically, these are anywhere from 1-5 sentences. Use paragraphs like you would when authoring a word document, to group sentences of a similar theme.
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
</Paragraph>
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
</Paragraph>Do
Use paragraphs for text blocks.
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
</Paragraph>
<Paragraph />
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
</Paragraph>Don't
Don’t use paragraphs for spacing or when more semantic elements can be used in their place, such as headings, lists, or labels.
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus
mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</Paragraph>
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus
mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</Paragraph>
Do
Break content up into small paragraphs that allow users to skim the information.
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
</Paragraph>
Don't
Don’t create overly long paragraphs that make it difficult for the reader to find information.
<Paragraph>
Donec sed odio dui. <a href="#">Aenean lacinia</a> bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
</Paragraph>
<Paragraph marginBottom="space0">
Donec sed odio dui. <strong>Aenean lacinia bibendum</strong> nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
</Paragraph>
Do
Use paragraphs as sibling elements, with only inline elements such as bold or italic as children.
<Paragraph>
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
<Paragraph marginBottom="space0">
Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit
</Paragraph>
</Paragraph>
Don't
Don’t nest paragraphs within each other either, only inline elements should be nested within a paragraph.