Paragraph

The paragraph component is used to render blocks of text, with a preset amount of space beneath it to distinguish from adjacent content.

Status
production
Version
1.1.30
Sources
Abstract
Install
yarn add @twilio-paste/paragraph — or — yarn add @twilio-paste/core

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.

Guidelines#

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

About Paragraphs#

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.

Accessibility#

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

Examples#

Default 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.

Composition Notes#

When to Use a Paragraph#

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.

Anatomy#

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

Usage Guide#

API#

Installation#

yarn add @twilio-paste/paragraph - or - yarn add @twilio-paste/core

Usage#

import {Paragraph} from '@twilio-paste/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>
);

Props#

PropTypeDefault
marginBottom'space0'
children?ReactNodenull
marginBottom prop#

Only allows passing 'space0' to unset the bottom margin. Useful when using Paragraph as the last child of a wrapping component, like a Card.


Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.