Numbered Headline

Basic Usage

7Example numbered headline (w/o numberColor)

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

42Example 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

7Single-digit

42Double-digit

123Triple-digit

Icons Supported

1 Numbered Headline With Left Icon

2Numbered Headline With Right Icons

Align Support

1Numbered Headline - Left

2Numbered Headline - Center

3Numbered Headline - Right

4Numbered Eyebrow

1Numbered Headline (xxxlarge)

2Numbered Subheadline (xxlarge)

3Numbered Text

1Numbered Headline (xxsmall)

2Numbered Headline (xsmall)

3Numbered Headline (small)

5Numbered Headline (large)

6Numbered Headline (xlarge)

7Numbered Headline (xxlarge)

8Numbered Headline (xxxlarge)

numberColor

By setting the numberColor prop to indigo, purple, teal, or orange, you can choose the background color of the Headline Number.

1Numbered Headline w/ Number

2Numbered Headline w/ Number

3Numbered Headline w/ Number

4Numbered Headline w/ Number

ANumbered Headline w/ Letter

BNumbered Headline w/ Letter

CNumbered Headline w/ Letter

DNumbered Headline w/ Letter

Theming

If you don't specify a numberColor, the current theme's colors will be used instead.