Text
Text Block
Text block provides a simple way to display text. It supports text cropping, style presets, and typography presets.
Anatomy
The text block contains one element.
| Item | Name | Description | Component | Optional |
|---|
Options
The text block has options that can be used to provide an appropriate experience for different use cases.
Render as
By using Render as, the text block can be converted to another heading element or div.
Text crop
Text crop functionality can be disabled on the text block.
Styling
Styling can be applied to the text block by using style presets and typography presets.
Drop cap
The drop cap can be applied to a paragraph to increase the size of the first initial letter. It has a number of defaults which define the space around, and the visual appearance of the drop cap.
Render as
By using Render as, the text block can be converted to another heading element or div.
Text crop
Text crop functionality can be disabled on the text block.
Styling
Styling can be applied to the text block by using style presets and typography presets.
Drop cap
The drop cap can be applied to a paragraph to increase the size of the first initial letter. It has a number of defaults which define the space around, and the visual appearance of the drop cap.
Usage
Here’s how and when to use the text block:
Do use for text content
Use the text block for any text content, to which typography presets and style presets can be applied.
Accessibility considerations
As this is an HTML element, this component can utilise any aria attribute, such as region.
By default, the text block will render as span. When using, consideration should be given as to what semantic level the text should be set at. This is to aid in the navigation of the page for users using assistive technologies. This can be configured with the as property.
SEO
Similar to accessibility, text should be set at the correct semantic level (eg <h1> to <h6>), to enable crawlers to better index the page.
API
The text block has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|