Paste

Design System

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
beta
Version
1.0.5
Sources
Storybook
Install
yarn add @twilio-paste/paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.

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.

Paragraph is part of the Typography package, which includes Header and List as well.

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#

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.

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>
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>
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-60No
colorcolor-textNo

Usage Guide#

API#

Installation#

yarn add @twilio-paste/paragraph

Usage#

import {Paragraph} from '@twilio-paste/paragraph';
<Paragraph>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur praesentium voluptate facere suscipit maiores vitae explicabo error ea? Quisquam, nisi excepturi aut esse non iste dolorum dicta. Tempore, doloribus voluptate!
</Paragraph>;

Props#

PropTypeDescriptionDefault
children?ReactNodenull

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.5 (2019-12-05)

Note: Version bump only for package @twilio-paste/paragraph

1.0.4 (2019-11-21)

Note: Version bump only for package @twilio-paste/paragraph

1.0.3 (2019-11-20)

Note: Version bump only for package @twilio-paste/paragraph

1.0.2 (2019-11-18)

Note: Version bump only for package @twilio-paste/paragraph

1.0.1 (2019-11-12)

Bug Fixes#

  • paragraph package deps incorrect (90ad6bc)

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • typography: heading component (#149) (4e033e6)
  • enable theme switching on the docsite (#124) (df797e5)

0.0.2 (2019-10-29)

Note: Version bump only for package @twilio-paste/paragraph

0.0.1 (2019-08-15)#

Note: Version bump only for package @twilio-paste/paragraph