2.24.1Headline Component
Headlines are specific combinations of typographic styles for display text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-headline
{% include "@bolt-components-headline/headline.twig" with {
text: "This is a headline",
} only %}
{% include "@bolt-components-headline/eyebrow.twig" with {
text: "This is an eyebrow",
} only %}
{% include "@bolt-components-headline/subheadline.twig" with {
text: "This is a subheadline",
} only %}
{% include "@bolt-components-headline/text.twig" with {
text: "This is text",
} only %}
{% include "@bolt-components-headline/lead.twig" with {
text: "This is a lead",
} only %}
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) |
|---|---|---|---|---|
| text * | Renderable text content of the headline. |
string , object , array |
— |
|
| tag | Html tag. |
string
|
p
|
|
| align | Text alignment. |
string
| — |
|
| weight | Font weights. |
string
|
regular
|
|
| style | Font styles. |
string
|
normal
|
|
| size | Font size. |
string
|
medium
|
|
| autoshrink | Automatically shrink the font size used in the |
boolean
|
true
|
|
| transform | Text transformation. |
string
| — |
|
| url | If provided, turns headline into a link to given url. |
string
| — |
|
| icon | Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by |
object , string , string |
— |
|
| quoted | Adds quoted styling to text. |
boolean
| — |
|
| numberText | Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear. |
string , number |
— |
|
| numberColor | The optional background color of the Headline bullet. Uses inherited theme colors if unspecified. |
string
| — |
|