Text Component
The ds-text component provides consistent typography styles across your application.
Basic Usage
Section titled “Basic Usage”<ds-text variant="body">This is some text</ds-text>Variants
Section titled “Variants”Heading
Section titled “Heading”Large heading text:
<ds-text variant="heading">Main Heading</ds-text>Standard body text:
<ds-text variant="body">This is body text for paragraphs.</ds-text>Smaller text for captions or secondary information:
<ds-text variant="small">Small text for captions</ds-text>Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
variant | 'heading' | 'body' | 'small' | 'body' | Text style variant |
data-key | string | - | Translation key for i18n |
With Translations
Section titled “With Translations”<ds-text variant="heading" data-key="welcome"></ds-text>Examples
Section titled “Examples”Multi-line Text
Section titled “Multi-line Text”<ds-text variant="body"> This text component supports multiple lines and will maintain proper spacing and formatting.</ds-text>Semantic HTML
Section titled “Semantic HTML”The component renders semantic HTML based on the variant:
heading→<h1>,<h2>, etc.body→<p>small→<small>