Overview
Text component v2. This is still in progress and only available as a web component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
Install via NPM
npm install @bolt/components-text
Usage
<bolt-text>
This is text.
</bolt-text>
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
Text content of the headline. |
string
| — |
|
|
|
HTML semantic tags. |
string
|
p
|
|
|
|
Inline text or a block of text. |
string
|
block
|
|
|
|
Text color in context of theme colors. |
string
|
theme-body
|
|
|
|
Text alignment. |
string
|
inherit
|
|
|
|
Opacity level. |
number
|
100
|
|
|
|
Quoted text. |
boolean
|
false
|
|
|
|
Line height in context of the typographic design. |
string
|
regular
|
|
|
|
Letter spacing in context of the typographic design. |
string
|
regular
|
|
|
|
Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case. |
string
|
regular
|
|
|
|
Font family in context of the typographic design. |
string
|
body
|
|
|
|
Font size in context of the typographic design. |
string
|
medium
|
|
|
|
Font weight in context of the typographic design. |
string
|
regular
|
|
|
|
Emphasized text. |
string
|
regular
|
|
|
|
A preset for headlines in context of the typographic design. |
boolean
|
false
|
|
|
|
A preset for subheadlines in context of the typographic design. |
boolean
|
false
|
|
|
|
A preset for eyebrow in context of the typographic design. |
boolean
|
false
|
|
|
|
If provided, turns headline into a link to given url. |
string
| — |
|
|
|
Each item in the array will build a utility class. No need to include |
array
| — |
|