2.20.0
Headline 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
| — |
|
H1
H2
H3
H4
H5
H6
P
This is an example of P
SPAN
This is an example of SPANAlign:
Align:
Align:
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
This is light weight and normal text
This is light weight and normal subheadline
This is light weight and italic text
This is light weight and italic subheadline
This is bold weight and normal text
This is bold weight and normal subheadline
This is bold weight and italic text
This is bold weight and italic subheadline
This is regular weight and normal text
This is regular weight and normal subheadline
This is regular weight and italic text
This is regular weight and italic subheadline
This is semibold weight and normal text
This is semibold weight and normal subheadline
This is semibold weight and italic text
This is semibold weight and italic subheadline
before
after
Left
Icon Position (Deprecated)Right
Icon Position (Deprecated) {% 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 %}
4Numbered Eyebrow
2Numbered Subheadline (xxlarge)
3Numbered 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.