Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - display-heading
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
<p>Follow these guidelines for appropriate Display Heading usage:</p> <ul> <li>Don't use Display Heading to resize text. Instead use the Text primitive.</li> <li>Use the appropriate tag for the Display Heading. If using an h1 tag, don't use more than one per page.</li> <li>Always use sentence case, unless you're writing a product name.</li> </ul> <p>Here are some examples of when you might want to use a Display Heading:</p> <ul> <li>Grabbing your user's attention on a home or onboarding page</li> <li>Marketing purposes or when you need to connect with the Twilio branding</li> <li>Displaying numbers on a dashboard layout to make them stand out</li> </ul> <h3>Accessibility</h3> <p>It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page. Skipping a heading level could cause confusion as the user navigating the page may not know why a heading is missing.</p> <ul> <li>Display Heading text should meet AA requirements (4.5:1) for color contrast from itself and the background color</li> <li>Display Headings should be used thoughtfully and intentionally, including the value passed to the as prop.</li> </ul> <h2>Examples</h2> <div class="preview-section"> <div class="display-heading-10">Twilio magic</div> <div class="display-heading-20">Twilio magic</div> <div class="display-heading-30">Twilio magic</div> </div> <h3>Display Heading as h1 with displayHeading10 variant</h3> <div class="preview-section"> <h1 class="display-heading-10">Display Heading one</h1> </div> <h3>Display Heading as h2 with heading20 variant</h3> <div class="preview-section"> <h2 class="display-heading-20">Display Heading two</h2> </div> <h3>Heading as h3 with displayHeading30 variant</h3> <div class="preview-section"> <h2 class="display-heading-30">Display Heading three</h2> </div> <h3>Display Heading with no bottom margin</h3> <div class="preview-section"> <div class="card"> <h2 class="display-heading-10 no-margin">Display Heading with no margin</h2> </div> </div> <h2>Composition Notes</h2> <h3>When to use Display Heading</h3> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use sentence case in Display Headings (except for a product name).</p> <h2 class="display-heading-30">This is sentence case</h2> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use title case.</p> <h2 class="display-heading-30">This Is Title Case</h2> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Display Headings to connect with the brand or grab users' attention.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Display Headings in place of the regular Heading component.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Be intentional about the value you pass to the as prop.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use multiple h1 tags on a page.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">