Skip to content
Change the site theme
(information)

Paragraph

A Paragraph is a block of text.


Guidelines

Guidelines page anchor

By default, the paragraph component should provide consistent values for font-size, line-height, and margin-bottom across themes.

About Paragraphs

About Paragraphs page anchor

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.

PropertyDefault tokenModifiable?
font-sizefont-size-30No
line-heightline-height-30No
font-weightfont-weight-normalNo
margin-bottomspace-70Yes
colorcolor-textNo

Installation

Installation page anchor
yarn add @twilio-paste/paragraph - or - yarn add @twilio-paste/core
import {Paragraph} from '@twilio-paste/core/paragraph';
const Component = () => (
<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>
);
PropTypeDefault
marginBottom'space0'Only allows passing 'space0' to unset the bottom margin. Useful when using Paragraph as the last child of a wrapping component, like a Card.
children?ReactNodenull
element?stringOverrides the default element name to apply unique styles with the Customization Provider'PARAGRAPH'

Black lives matter.