Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - paragraph
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
</div> <h2>Guidelines</h2> <p class="paste-paragraph"> By default, the paragraph component should provide consistent values for font-size, line-height, and margin-bottom across themes. </p> <h3>About Paragraphs</h3> <p class="paste-paragraph"> 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. </p> <h3>Accessibility</h3> <p class="paste-paragraph"> 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. </p> <ul> <li>Breaking content up into paragraphs helps screen readers and assistive technology provide shortcuts for users to skip between them</li> <li>Paragraph text should meet AA requirements (4.5:1) for color contrast from itself and the background color</li> </ul> <h2>Examples</h2> <h3>Default Paragraph</h3> <div class="example-box"> <article> <p class="paste-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. </p> </article> </div> <h2>Composition Notes</h2> <h3>When to Use a Paragraph</h3> <p class="paste-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. </p> <!-- Do/Don't Examples --> <div class="do-dont-container"> <div class="do-box"> <div class="do-title">Do</div> <p>Use paragraphs for text blocks.</p> <div class="code-block"><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> </div> </div> <div class="dont-box"> <div class="dont-title">Don't</div> <p>Don't use paragraphs for spacing or when more semantic elements can be used in their place, such as headings, lists, or labels.</p> <div class="code-block"><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> </div> </div> </div> <div class="do-dont-container"> <div class="do-box"> <div class="do-title">Do</div> <p>Break content up into small paragraphs that allow users to skim the information.</p> <div class="code-block"><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> </div> </div> <div class="dont-box"> <div class="dont-title">Don't</div> <p>Don't create overly long paragraphs that make it difficult for the reader to find information.</p> <div class="code-block"><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> </div> </div> </div> <div class="do-dont-container"> <div class="do-box"> <div class="do-title">Do</div> <p>Use paragraphs as sibling elements, with only inline elements such as bold or italic as children.</p> <div class="code-block"><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> </div> </div> <div class="dont-box"> <div class="dont-title">Don't</div> <p>Don't nest paragraphs within each other either, only inline elements should be nested within a paragraph.</p> <div class="code-block"><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> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p class="paste-paragraph"> Help us improve this component by providing feedback, asking questions on Slack, or updating this file on <a href="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/paragraph" class="paste-anchor" target="_blank">GitHub</a>. </p> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">