2.11.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) |
---|---|---|---|---|
|
Renderable text content of the headline. |
string , object , array |
— |
|
|
Html tag. |
string
|
p
|
|
|
Text alignment. |
string
| — |
|
|
Font weights. |
string
|
regular
|
|
|
Font styles. |
string
|
normal
|
|
|
Font size. |
string
|
medium
|
|
|
Text transformation. |
string
| — |
|
|
If provided, turns headline into a link to given url. |
string
| — |
|
|
Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by |
object , string , string |
— |
|
|
Adds quoted styling to text. |
boolean
| — |
|
H1
H2
H3
H4
H5
H6
P
This is an example of P
SPAN
This is an example of SPANAlign:
Align:
Align:
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 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 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 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 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 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 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)