Numbered Headline

Basic Usage

7 Example numbered headline (w/o number_color)

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Example numbered headline (w/o number_color)',
  number_text: 7,
} only %}

42 Example numbered headline (w/ number_color)

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Example numbered headline (w/ number_color)',
  number_text: 42,
  number_color: '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)

number_color

By setting the number_color prop to navy, violet, 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 number_color, the current theme's colors will be used instead.

1 Without number_color

2 Without number_color

3 Without number_color

4 Without number_color