Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - card
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> <button class="paste-button">Start Building</button> </div> </div> </div> </div> <!-- Fill Height Example --> <h3 class="paste-heading paste-heading-h3">Fill height</h3> <p class="paste-paragraph">In scenarios where there is a requirement for the card to fill the height of the parent container, you can use the fillHeight prop.</p> <div class="example-container"> <div class="paste-card paste-card-fill-height"> <h4 class="paste-heading paste-heading-h4">Fill Height Card</h4> <p class="paste-paragraph">This card fills the available height of its container.</p> <div style="margin-top: auto;"> <button class="paste-button">Action</button> </div> </div> </div> <!-- Fill Width Example --> <h3 class="paste-heading paste-heading-h3">Fill width</h3> <p class="paste-paragraph">By default, Card width fills the available space of the parent container. However, when wrapped in a flexbox, Card shrinks to fit the available space. To prevent this, use the fillWidth prop.</p> <div class="example-container"> <div class="flex-container"> <div class="paste-card paste-card-fill-width"> <h4 class="paste-heading paste-heading-h4">Fill Width Card</h4> <p class="paste-paragraph">This card fills the available width in a flex container.</p> </div> <div class="paste-card"> <h4 class="paste-heading paste-heading-h4">Normal Card</h4> <p class="paste-paragraph">This card has normal width behavior.</p> </div> </div> </div> <!-- Marketing Card Section --> <h3 class="paste-heading paste-heading-h3">Marketing Card</h3> <p class="paste-paragraph">Use these layouts when you need to draw customers' attention to upsell and cross-sell opportunities. Use them sparingly, mainly when they'll help customers solve immediate problems.</p> <div class="paste-callout paste-callout-neutral"> <h5 class="paste-heading paste-heading-h5">Research insight on marketing and cross-selling</h5> <p class="paste-paragraph">Research from Twilio has shown that cross-sell cards aren't useful when the developers are in the product focused on urgent problems. They're likely to ignore these cards, regardless of how they're presented, until they're relevant to a current project they're working on.</p> </div> <!-- Marketing Card Examples --> <div class="example-container"> <div class="paste-card marketing-card"> <div class="paste-stack"> <span class="paste-badge paste-badge-brand">Flex</span> <h4 class="paste-heading paste-heading-h4">Upgrade to Flex</h4> <p class="paste-paragraph">Build modern contact centers with Twilio Flex. Scale your customer service operations with our programmable contact center platform.</p> <div> <button class="paste-button">Learn More</button> </div> </div> </div> </div> <div class="example-container"> <div class="paste-card paste-card-large-padding"> <div class="paste-stack"> <div style="width: 60px; height: 60px; background: linear-gradient(45deg, #667eea, #764ba2); border-radius: 8px; margin-bottom: 16px;"></div> <h4 class="paste-heading paste-heading-h4">Enhance Your App</h4> <p class="paste-paragraph">Add video calling capabilities to your application with Twilio Video. Create immersive experiences for your users.</p> <div class="paste-stack-horizontal"> <button class="paste-button">Get Started</button> <a href="#" class="paste-anchor">Learn more</a> </div> </div> </div> </div> <!-- Composition Notes --> <h2 class="paste-heading paste-heading-h2">Composition notes</h2> <p class="paste-paragraph">When a Card contains text content, use the following guidelines:</p> <ul> <li>Use a Heading to highlight the most important information.</li> <li>Use a Paragraph to add additional context. Do not repeat the information in the header. Front-load the most critical information.</li> <li>When presenting multiple Cards of equal weight on a single page, structure each Card's content similarly.</li> </ul> <!-- Do and Don't Section --> <h2 class="paste-heading paste-heading-h2">Do and don't</h2> <div class="do-dont-container"> <div class="do-card"> <h4 class="paste-heading paste-heading-h4" style="color: #14b8a6;">Do</h4> <p class="paste-paragraph">Have a clear call to action when including Buttons. Avoid including more than one primary and one secondary button.</p> </div> <div class="dont-card"> <h4 class="paste-heading paste-heading-h4" style="color: #f22f46;">Don't</h4> <p class="paste-paragraph">Don't put multiple primary actions in a Card</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <h4 class="paste-heading paste-heading-h4" style="color: #14b8a6;">Do</h4> <p class="paste-paragraph">Use a Heading in your Card that appropriately reflects the information architecture of the page.</p> </div> <div class="dont-card"> <h4 class="paste-heading paste-heading-h4" style="color: #f22f46;">Don't</h4> <p class="paste-paragraph">Don't use Cards to highlight multiple primary actions on a single page.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <h4 class="paste-heading paste-heading-h4" style="color: #14b8a6;">Do</h4> <p class="paste-paragraph">Use a Heading to set a clear expectation on the Card's purpose.</p> </div> <div class="dont-card"> <h4 class="paste-heading paste-heading-h4" style="color: #f22f46;">Don't</h4> <p class="paste-paragraph">Don't place multiple Heading components in a single Card.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <h4 class="paste-heading paste-heading-h4" style="color: #14b8a6;">Do</h4> <p class="paste-paragraph">Use a consistent location on the bottom of the Card for primary actions or next steps.</p> </div> <div style="grid-column: span 1;"></div> </div> <hr class="paste-separator"> <h2 class="paste-heading paste-heading-h2">Feedback</h2> <p class="paste-paragraph"> 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">