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 (#{size})

2 Numbered Headline (#{size})

3 Numbered Headline (#{size})

5 Numbered Headline (#{size})

6 Numbered Headline (#{size})

7 Numbered Headline (#{size})

8 Numbered Headline (#{size})


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.

1 Without numberColor

2 Without numberColor

3 Without numberColor

4 Without numberColor