Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - grid
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>Don't use more than 12 columns within Grid.</p> <div id="dont-example-1"></div> </div> </div> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">Do</div> <p>Use Grid to align content to the right or left side of a page layout.</p> <div id="do-example-2"></div> </div> <div class="dont-section"> <div class="dont-title">Don't</div> <p>Don't use Grid with only one full-width column of content. This causes unnecessary elements. Box is what you're looking for here.</p> <div id="dont-example-2"></div> </div> </div> </div> <script> // Wait for components to be available setTimeout(() => { // Basic Grid Example const basicGrid = React.createElement(Grid, { gutter: "space30" }, React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Instant Provisioning"), React.createElement(Paragraph, null, "The API and the Console allow you to search and provision local, toll-free, or mobile numbers by capability, geography, prefix or keyword.") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Vast Inventory"), React.createElement(Paragraph, null, "Twilio maintains phone number inventory at a rate of 50 times the quantity provisioned daily for over 600 area codes and prefixes.") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Quality Screening"), React.createElement(Paragraph, null, "Every phone number in the inventory passes a rigorous 60-day screening process to verify capabilities and test for unwanted call traffic.") ) ) ); // Equal Columns Example const equalColumns = React.createElement(Grid, { gutter: "space30" }, React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Instant Provisioning"), React.createElement(Paragraph, null, "The API and the Console allow you to search and provision local, toll-free, or mobile numbers by capability, geography, prefix or keyword.") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Vast Inventory"), React.createElement(Paragraph, null, "Twilio maintains phone number inventory at a rate of 50 times the quantity provisioned daily for over 600 area codes and prefixes.") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Quality Screening"), React.createElement(Paragraph, null, "Every phone number in the inventory passes a rigorous 60-day screening process to verify capabilities and test for unwanted call traffic.") ) ) ); // Unequal Columns Example const unequalColumns = React.createElement(Grid, { gutter: "space30" }, React.createElement(Column, { span: 8 }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Getting Started with Parse"), React.createElement(Paragraph, null, "Use SendGrid to make your email a two-way street. The Parse Webhook is a powerful tool that can take incoming email for your domain or subdomain and direct it to your application."), React.createElement(Heading, { as: "h4", variant: "heading40" }, "Your Email Funnel"), React.createElement(Paragraph, null, "Expert Insights analyzes each layer of your email funnel to determine leakage points (such as blocked emails) and opportunities to improve deliverability and engagement.") ), React.createElement(Column, { span: 4 }, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Expert Insights"), React.createElement(Paragraph, null, "Send better email with Expert Insights. Our detailed monthly reports with expert recommendations will give you deeper visibility into the health and performance of your email program."), React.createElement(Button, null, "Add to Plan") ) ) ); // Offset Column Example const offsetColumn = React.createElement(Grid, { gutter: "space30" }, React.createElement(Column, { span: 8, offset: 2 }, React.createElement(Card, { padding: "space70" }, React.createElement(Text, { as: "div", textAlign: "center" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Create your first Signup Form"), React.createElement(Paragraph, null, "Create and share a form to capture new signups and add them directly to your Contacts. You'll grow your list the right way, knowing each new contact has opted in to receive your content."), React.createElement(Button, null, "Create a Signup Form") ) ) ) ); // Equal Heights Example const equalHeights = React.createElement(Grid, { gutter: "space30", equalColumnHeights: true }, React.createElement(Column, { span: 4 }, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h2", variant: "heading20" }, "Why use Paste?"), React.createElement(Paragraph, { marginBottom: "space0" }, "Paste helps you rapidly prototype, and ship great, inclusive customer experiences. It makes it easy to do the right thing, cheaply.") ) ), React.createElement(Column, { span: 4 }, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h2", variant: "heading20" }, "Inclusive by default"), React.createElement(Paragraph, { marginBottom: "space0" }, "Paste meets WCAG 2.1 AA standards in the design and development of our components, making it even easier to build accessibly.") ) ), React.createElement(Column, { span: 4 }, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h2", variant: "heading20" }, "Get up and running"), React.createElement(Paragraph, { marginBottom: "space0" }, "Whether you're a designer or developer, setting up Paste is easy and only takes a few minutes!") ) ) ); // Vertical Layout Example const verticalLayout = React.createElement(Grid, { gutter: "space30", vertical: true }, React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "Web API"), React.createElement(Paragraph, null, "The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more."), React.createElement(Button, null, "Choose") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "SMTP Relay"), React.createElement(Paragraph, null, "The easiest way to send email. It only requires modifying your application's SMTP configuration."), React.createElement(Button, null, "Choose") ) ), React.createElement(Column, null, React.createElement(Card, { padding: "space70" }, React.createElement(Heading, { as: "h4", variant: "heading40" }, "What's new at Twilio"), React.createElement(Paragraph, null, "Check out our newest product releases on the Twilio Changelog."), React.createElement(Button, null, "Changelog") ) ) ); // Do Example 1 const doExample1 = React.createElement(Box, { padding: "space60" }, React.createElement(Grid, { gutter: "space30" }, React.createElement(Column, { span: 4 }, React.createElement(Card, null, React.createElement(Paragraph, null, "4 Column Card") ) ), React.createElement(Column, { span: 8 }, React.createElement(Card, null, React.createElement(Paragraph, null, "8 Column Card") ) ) ) ); // Don't Example 1 - Too many columns const dontExample1 = React.createElement(Box, { padding: "space60" }, React.createElement(Grid, { gutter: "space30" }, ...Array(13).fill().map((_, i) => React.createElement(Column, { key: i }, React.createElement(Card, null, React.createElement(Paragraph, null, "Card") ) ) ) ) ); // Render all examples ReactDOM.render(basicGrid, document.getElementById('basic-grid')); ReactDOM.render(equalColumns, document.getElementById('equal-columns')); ReactDOM.render(unequalColumns, document.getElementById('unequal-columns')); ReactDOM.render(offsetColumn, document.getElementById('offset-column')); ReactDOM.render(equalHeights, document.getElementById('equal-heights')); ReactDOM.render(verticalLayout, document.getElementById('vertical-layout')); ReactDOM.render(doExample1, document.getElementById('do-example-1')); ReactDOM.render(dontExample1, document.getElementById('dont-example-1')); }, 1000); </script> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script></body></html>' width="100%" height="2000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">