{% 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 %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
text
*
|
Renderable text content of the headline. |
string
, object
, array
|
— |
|
tag
|
Set the semantic HTML tag for the headline. |
string
|
p
|
|
link_attributes
|
Any valid anchor element attribute can be used. For example: href, target, rel, etc. |
object
| — |
|
align
|
Set the text alignment of the headline. |
string
| — |
|
weight
|
Set the weight of the headline. |
string
|
regular
|
|
style
|
Set the style fo the headline. |
string
|
normal
|
|
size
|
Set the size of the headline. |
string
|
medium
|
|
autoshrink
|
Automatically shrink the font size used in the |
boolean
|
true
|
|
transform
|
Text transformation. |
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
| — |
|
number_text
|
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
|
— |
|
number_color
|
The optional background color of the Headline bullet. Uses inherited theme colors if unspecified. |
string
| — |
|
numberText
(deprecated) |
Use number_text instead. |
— | — |
|
numberColor
(deprecated) |
Use number_color instead. |
— | — |
|
url
(deprecated) |
Use link_attributes instead. |
— | — |
|
target
(deprecated) |
Use link_attributes instead. |
— | — |
|
npm install @bolt/components-headline
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
before
after
Left
Icon PositionRight
Icon Position{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/o number_color)',
number_text: 7,
} only %}
{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/ number_color)',
number_text: 42,
number_color: 'orange'
} only %}
4 Numbered Eyebrow
2 Numbered Subheadline (xxlarge)
3 Numbered Text
By setting the number_color
prop to navy
, violet
, teal
, or orange
, you can choose the background color of the Headline Number.
If you don't specify a number_color
, the current theme's colors will be used instead.