{% 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
|
|
|
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
|
|
|
target
|
A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. |
string
|
_self
|
|
|
transform
|
Text transformation. |
string
| — |
|
|
url
|
Optional. Contains a URL that the chip points to. When URL is present, tag changes to |
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
| — |
|
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
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.