Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - detail-text
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
<style> body { font-family: "Twilio Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; color: #121C2D; margin: 0; padding: 20px; background-color: #F4F4F6; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 32px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .example-section { margin: 32px 0; padding: 24px; border: 1px solid #E1E3EA; border-radius: 8px; background: #FAFBFC; } .do-dont-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; } .do-card, .dont-card { padding: 20px; border-radius: 8px; border: 1px solid; } .do-card { background: #F0F9F0; border-color: #14B885; } .dont-card { background: #FEF7F7; border-color: #D61F1F; } .sample-image { width: 100%; max-width: 400px; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; margin-bottom: 8px; } .table-container { margin: 16px 0; } table { width: 100%; border-collapse: collapse; border: 1px solid #E1E3EA; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #E1E3EA; } th { background: #F4F4F6; font-weight: 600; } .detail-text { font-size: 12px; line-height: 1.4; color: #606B85; margin-top: 8px; } .detail-text-no-margin { font-size: 12px; line-height: 1.4; color: #606B85; margin-top: 0; } .callout { background: #F0F6FF; border: 1px solid #0263E0; border-radius: 8px; padding: 16px; margin: 24px 0; } .card-example { background: white; border: 1px solid #E1E3EA; border-radius: 8px; padding: 16px; margin: 16px 0; } .arrow-up { display: inline-block; width: 16px; height: 16px; margin-right: 8px; } </style></head><body> <div class="container"> <!-- Title & Links --> <h1>Detail Text</h1> <p> <a href="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/detail-text" target="_blank">Source code</a> | <a href="/?path=/story/components-detail-text--default" target="_blank">Storybook</a> | <a href="/components/detail-text/" target="_blank">Usage guidelines</a> </p> <p><strong>Detail Text is typography used for short pieces of secondary text content.</strong></p> <!-- Example 1: Detail Text with Image --> <div class="example-section"> <h3>Detail Text below an image</h3> <p>Use Detail Text to add a caption below an image.</p> <div class="sample-image"> Sample Image </div> <div class="detail-text"> This is a sample image caption using Detail Text component. </div> </div> <!-- Guidelines Section --> <h2>Guidelines</h2> <h3>About Detail Text</h3> <p>The Detail Text component is used for small pieces of text that are secondary to body text in the hierarchy of a page. Common examples include an image caption, chart element legend, or a paragraph footnote.</p> <p>Detail Text should not be used for body text, and should be reserved for small pieces of content only. It should not be used solely for its stylistic properties within other typographic elements.</p> <h3>Accessibility</h3> <p>The Detail Text component is a <code>div</code> element by default. You can modify the element in situations where a <code>div</code> isn </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> t semantically correct. For example, set <code>as="figcaption"</code> if working with Detail Text inside a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure" target="_blank"><code>figure</code> element</a>.</p> <div class="callout"> <p>Detail Text is not the same as alt text on images. The context and content of your usage might mean including alt text for further detail, or making alt text an empty string to prevent redundancy. <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank">Learn more about alt text and when to use it.</a></p> </div> <!-- Examples Section --> <h2>Examples</h2> <!-- Example 2: Detail Text with Primary Content --> <div class="example-section"> <h3>Detail Text below primary content</h3> <p>Use Detail Text to add a description below primary content for extra context.</p> <div class="table-container"> <table> <thead> <tr> <th>Product</th> <th>Usage</th> <th>Cost</th> </tr> </thead> <tbody> <tr> <td>SMS</td> <td>1,234 messages</td> <td>$12.34</td> </tr> <tr> <td>Voice</td> <td>567 minutes</td> <td>$56.70</td> </tr> </tbody> </table> <div class="detail-text"> Data shown is for the current billing period ending March 31, 2024. </div> </div> </div> <!-- Example 3: Detail Text with No Margin --> <div class="example-section"> <h3>Detail Text with no top margin</h3> <p>Detail Text includes a marginTop prop to remove its default top margin of <code>space30</code>.</p> <div class="card-example"> <h4> <span class="arrow-up">↑</span> Usage increased by 15% </h4> <div class="detail-text-no-margin"> Compared to last month </div> </div> </div> <!-- Example 4: Detail Text as Footnote --> <div class="example-section"> <h3>Detail Text as a footnote</h3> <p>Use Detail Text to add a footnote below a paragraph.</p> <h4>Privacy and Security</h4> <p>Twilio takes data protection seriously and implements industry-standard security measures to protect your information. All data is encrypted in transit and at rest.</p> <div class="detail-text"> * Security certifications include SOC 2 Type II, ISO 27001, and HIPAA compliance. </div> </div> <!-- When to Use Section --> <h2>When to use Detail Text</h2> <div class="do-dont-container"> <div class="do-card"> <h4 style="color: #14B885; margin-top: 0;">Do</h4> <p>Use Detail Text for small pieces of text that are not the main content of the UI, like graph legends and image captions</p> </div> <div class="dont-card"> <h4 style="color: #D61F1F; margin-top: 0;">Don </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> t</h4> <p>Don </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> t use Detail Text for body content. Consider using Paragraph instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <h4 style="color: #14B885; margin-top: 0;">Do</h4> <p>Use Detail Text semantically</p> </div> <div class="dont-card"> <h4 style="color: #D61F1F; margin-top: 0;">Don </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> t</h4> <p>Don </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> t use Detail Text for stylistic purposes within other typography. Consider using the Text primitive instead.</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">