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
| — |
|
This text is <p> and medium size.
This is light weight and normal text
This is light weight and italic text
This is bold weight and normal text
This is bold weight and italic text
This is regular weight and normal text
This is regular weight and italic text
This is semibold weight and normal text
This is semibold weight and italic text
beforeafterLeft Icon PositionRight Icon Position {% include "@bolt-components-headline/headline.twig" with {
text: "Example numbered headline (w/o numberColor)",
numberText: 7,
} only %}
{% include "@bolt-components-headline/headline.twig" with {
text: "Example numbered headline (w/ numberColor)",
numberText: 42,
numberColor: "orange"
} only %}
4 Numbered Eyebrow
2 Numbered Subheadline (xxlarge)
3 Numbered Text
By setting the numberColor prop to indigo, purple, teal, or orange, you can choose the background color of the Headline Number.
If you don't specify a numberColor, the current theme's colors will be used instead.