Text
Source: https://dripyard.com/docs/dripyard-base/components/text
Theme: dripyard-base
A very basic component to display some text with minimal styling.
Usage
{{ include('dripyard_base:text', {
text: 'Your text content here',
style: 'body_m',
color: 'medium',
center: false,
text_max_width: '800px',
modifier_classes: 'custom-class'
}, with_context = false) }}
Accessibility Considerations
- Uses a basic `` wrapper with semantic class name
- Text content is rendered directly without additional markup modifications
- Inherits all accessibility features from the provided text content
- Relies on proper heading hierarchy and semantic markup from parent components
Props
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
text |
string | No | - | The text content to display (HTML content is supported) |
style |
string | Yes | - | Text size style: body_l (Large), body_m (Medium), body_s (Small) |
color |
string | Yes | inherit |
Text color variant: inherit, soft, medium, loud, primary |
center |
boolean | No | - | Boolean to center align the text |
text_max_width |
string | No | - | Maximum width constraint: 400px, 600px, 800px, 1000px, 1200px, 1400px |
modifier_classes |
string | No | - | Additional CSS classes to apply to the component |