Numbered Headline
Basic Usage
7
Example numbered headline (w/o numberColor)
{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/o numberColor)',
numberText: 7,
} only %}
42
Example numbered headline (w/ numberColor)
{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/ numberColor)',
numberText: 42,
numberColor: 'orange'
} only %}
Up to 3 digits supported
7
Single-digit
42
Double-digit
123
Triple-digit
Icons Supported
1Numbered Headline With Left Icon
2Numbered Headline With Right Icons
Align Support
1
Numbered Headline - Left
2
Numbered Headline - Center
3
Numbered Headline - Right
4
Numbered Eyebrow
1
Numbered Headline (xxxlarge)
2
Numbered Subheadline (xxlarge)
3
Numbered Text
1
Numbered Headline (xxsmall)
2
Numbered Headline (xsmall)
3
Numbered Headline (small)
5
Numbered Headline (large)
6
Numbered Headline (xlarge)
7
Numbered Headline (xxlarge)
8
Numbered Headline (xxxlarge)
numberColor
By setting the numberColor prop to navy, purple, teal, or orange, you can choose the background color of the Headline Number.
1
Numbered Headline w/ Number
2
Numbered Headline w/ Number
3
Numbered Headline w/ Number
4
Numbered Headline w/ Number
A
Numbered Headline w/ Letter
B
Numbered Headline w/ Letter
C
Numbered Headline w/ Letter
D
Numbered Headline w/ Letter
Theming
If you don't specify a numberColor, the current theme's colors will be used instead.