<Paragraph>Impossible is just a big word thrown around by small men who find it easier to live in the world they’ve been given than to explore the power they have to change it. Impossible is not a fact. It’s an opinion. Impossible is not a declaration. It's a dare. Impossible is potential. Impossible is temporary. Impossible is nothing.</Paragraph>
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
<article><Paragraph>We have inherited a fear of memories of slavery. It is as if to remember and acknowledge slavery would amount to our being consumed by it. As a matter of fact, in the popular black imagination, it is easier for us to construct ourselves as children of Africa, as the sons and daughters of kings and queens, and thereby ignore the Middle Passage and centuries of enforced servitude in the Americas. Although some of us might indeed be the descendants of African royalty, most of us are probably descendants of their subjects, the daughters and sons of African peasants or workers.</Paragraph></article>
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.