Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - list
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
<h2>Dos and don'ts</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a list when you have more than one item or point.</p> <div id="do-example-1"></div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use lists for a single item.</p> <div id="dont-example-1"></div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use nested lists to provide additional clarity or instruction on specific topics.</p> <div id="do-example-2"></div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't nest lists if the nested content is unrelated to the higher level topic.</p> <div id="dont-example-2"></div> </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> <script> document.addEventListener("DOMContentLoaded", function() { const { UnorderedList, OrderedList, ListItem, OrderedDisplayList, OrderedDisplayListItem, OrderedDisplayListHeading, Heading, Anchor, Stack, Box, Callout, CalloutHeading, CalloutText, InlineCode } = window.TwilioComponents; // Basic Unordered List const basicList = UnorderedList({}, ListItem({}, "Trans black lives matter"), ListItem({}, "Queer black lives matter"), ListItem({}, "Poor black lives matter"), ListItem({}, "Young black lives matter"), ListItem({}, "Old black lives matter"), ListItem({}, "All black lives matter") ); document.getElementById("basic-unordered-list").appendChild(basicList); // Guidelines List const guidelinesList = UnorderedList({}, ListItem({}, "Unordered, when the meaning of the list is not changed based on the order of the items"), ListItem({}, "Ordered, when the order of the list items matters for context to the user."), ListItem({}, "Ordered Display List, when you need a visually enhanced numbered list to improve the scannability of sequential steps, instructions, or other content within a single screen.") ); document.getElementById("guidelines-list").appendChild(guidelinesList); // About Lists const aboutList = UnorderedList({}, ListItem({}, "Ordered lists are displayed with a preceding number."), ListItem({}, "Unordered lists are displayed with a preceding bullet point."), ListItem({}, "Ordered Display lists are displayed with a preceding visually enhanced number."), ListItem({}, "Lists can be nested as deeply as needed, and they may alternate between ordered and unordered."), ListItem({}, "Lists should align with the font-size, font-weight, and line-height of paragraphs, but are styled with bullets or numbers."), ListItem({}, "Lists can have similar children elements as paragraphs to provide emphasis on a certain word or phrase.") ); document.getElementById("about-lists").appendChild(aboutList); // Accessibility List const accessibilityList = UnorderedList({}, ListItem({}, "ListItems should always have an OrderedList or UnorderedList parent component."), ListItem({}, "Nested ListItems should be wrapped in their own, new OrderedList or UnorderedList parent component.") ); document.getElementById("accessibility-list").appendChild(accessibilityList); // Unordered Example const unorderedExample = UnorderedList({}, ListItem({}, "Tamir Elijah Rice, November 23, 2014 (12 years old)"), ListItem({}, "Philando Divall Castile, July 6, 2016 (32 years old)"), ListItem({}, "Trayvon Benjamin Martin, February 26, 2012 (17 years old)"), ListItem({}, "Breonna Taylor, March 13, 2020 (26 years old)"), ListItem({}, "Shantel Davis, June 14, 2012 (23 years old)"), ListItem({}, "Walter Scott, April 4, 2015 (50 years old)"), ListItem({}, "Mario Gonzalez, April 19, 2021 (26 years old)") ); document.getElementById("unordered-example").appendChild(unorderedExample); // Ordered Example const orderedExample = OrderedList({}, ListItem({}, "Tamir Elijah Rice, November 23, 2014 (12 years old)"), ListItem({}, "Philando Divall Castile, July 6, 2016 (32 years old)"), ListItem({}, "Trayvon Benjamin Martin, February 26, 2012 (17 years old)"), ListItem({}, "Breonna Taylor, March 13, 2020 (26 years old)"), ListItem({}, "Shantel Davis, June 14, 2012 (23 years old)"), ListItem({}, "Walter Scott, April 4, 2015 (50 years old)"), ListItem({}, "Mario Gonzalez, April 19, 2021 (26 years old)") ); document.getElementById("ordered-example").appendChild(orderedExample); // Callout Warning const calloutWarning = Callout({ variant: "warning", marginY: "space60" }, CalloutHeading({ as: "h3" }, "Alignment considerations"), CalloutText({}, "If you're not utilizing the ", InlineCode({}, "OrderedDisplayListHeading"), " component, please note that only the ", InlineCode({}, "heading50"), " and ", InlineCode({}, "heading60"), " variants are automatically aligned with their corresponding list item numbers." ) ); document.getElementById("callout-warning").appendChild(calloutWarning); // Ordered Display Example const orderedDisplayExample = Box({}, Heading({ variant: "heading30", as: "h3" }, "Getting started with unified profiles"), OrderedDisplayList({ variant: "heading40" }, OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Set up your Segment Unify space"), Stack({ orientation: "vertical", spacing: "space40" }, Box({}, "To get started, let's set up your Segment Unify space. We'll take you to Segment to do this."), Anchor({ href: "https://segment.com", showExternal: true }, "Continue setup in Segment") ) ), OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Confirm your identifier settings"), Stack({ orientation: "vertical", spacing: "space40" }, Box({}, "Segment uses identifiers to look up customer profiles. Give your identifiers display names, and select the identifiers to use for automatic profile search."), Anchor({ href: "https://segment.com", showExternal: true }, "Continue setup in Segment") ) ), OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Choose your traits"), Stack({ orientation: "vertical", spacing: "space40" }, Box({}, "Customer profiles on your Segment Unify space may include a large number of traits. Choose the traits you want to make available to Flex agents and give them display names."), Anchor({ href: "https://segment.com", showExternal: true }, "Continue setup in Segment") ) ) ) ); document.getElementById("ordered-display-example").appendChild(orderedDisplayExample); // Nesting Example const nestingContainer = Box({}); const orderedNested = OrderedList({}, ListItem({}, "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.", UnorderedList({ marginBottom: "space0" }, ListItem({}, "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."), ListItem({}, "Duis mollis, est non commodo luctus.") ) ), ListItem({}, "Duis mollis, est non commodo luctus.") ); const unorderedNested = UnorderedList({}, ListItem({}, "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.", OrderedList({ marginBottom: "space0" }, ListItem({}, "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."), ListItem({}, "Duis mollis, est non commodo luctus.") ) ), ListItem({}, "Duis mollis, est non commodo luctus.") ); nestingContainer.appendChild(orderedNested); nestingContainer.appendChild(unorderedNested); document.getElementById("nesting-example").appendChild(nestingContainer); // Ordered Display List Nesting const orderedDisplayNesting = OrderedDisplayList({ variant: "heading30" }, OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Vivamus sagittiss"), Stack({ orientation: "vertical", spacing: "space40" }, Box({}, "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."), OrderedDisplayList({ variant: "heading40" }, OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Vivamus sagittiss"), "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor." ), OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Duis mollis"), "Duis mollis, est non commodo luctus." ) ) ) ), OrderedDisplayListItem({}, OrderedDisplayListHeading({ as: "div" }, "Duis mollis"), "Duis mollis, est non commodo luctus." ) ); document.getElementById("ordered-display-nesting").appendChild(orderedDisplayNesting); // Do Example 1 const doExample1 = UnorderedList({}, ListItem({}, "Point one"), ListItem({}, "Point two"), ListItem({}, "Point three") ); document.getElementById("do-example-1").appendChild(doExample1); // Don't Example 1 const dontExample1 = UnorderedList({}, ListItem({}, "Point one") ); document.getElementById("dont-example-1").appendChild(dontExample1); // Do Example 2 const doExample2 = Box({ padding: "space60" }, Heading({ as: "h2", variant: "heading30" }, "Animals"), UnorderedList({}, ListItem({}, "Mammals", UnorderedList({ marginBottom: "space0" }, ListItem({}, "Cat"), ListItem({}, "Dog") ) ), ListItem({}, "Birds", UnorderedList({ marginBottom: "space0" }, ListItem({}, "Chicken"), ListItem({}, "Turkey") ) ) ) ); document.getElementById("do-example-2").appendChild(doExample2); // Don't Example 2 const dontExample2 = Box({ padding: "space60" }, Heading({ as: "h2", variant: "heading30" }, "Animals"), UnorderedList({}, ListItem({}, "Mammals", Heading({ as: "h3", variant: "heading40" }, "Groceries"), UnorderedList({ marginBottom: "space0" }, ListItem({}, "Milk"), ListItem({}, "Butter") ) ), ListItem({}, "Birds", UnorderedList({ marginBottom: "space0" }, ListItem({}, "Chicken"), ListItem({}, "Turkey") ) ) ) ); document.getElementById("dont-example-2").appendChild(dontExample2); }); </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">