headline docs

2.20.0

Headline

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.

Install via NPM
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)
text *

Renderable text content of the headline.

string , object , array
tag

Html tag.

string p
  • h1, h2, h3, h4, h5, h6, p, span, cite, div
align

Text alignment.

string
  • left, center, right
weight

Font weights.

string regular
  • light, bold, regular, semibold
style

Font styles.

string normal
  • normal or italic
size

Font size.

string medium
  • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
autoshrink

Automatically shrink the font size used in the xxxlarge headline size when 60 or more characters are used.

boolean true
transform

Text transformation.

string
  • uppercase, lowercase, capitalize
url

If provided, turns headline into a link to given url.

string
icon

Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by @bolt-components-icon or 3) the string "none" to explicitly remove default icons

object , string , string
quoted

Adds quoted styling to text.

boolean
numberText

Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear.

string , number
numberColor

The optional background color of the Headline bullet. Uses inherited theme colors if unspecified.

string
  • teal, indigo, orange, purple

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

H1

This is an example of H1

H2

This is an example of H2

H3

This is an example of H3

H4

This is an example of H4

H5

This is an example of H5

H6

This is an example of H6

P

This is an example of P

SPAN

This is an example of SPAN

Align:

This is an example of align left

Align:

This is an example of align center

Align:

This is an example of align right

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

Headline w/ Icon Position before

What we do at Pega is brilliant!



Headline w/ Icon Position after

What we do at Pega is brilliant!



Headline w/ Default Icon Position

What we do at Pega is brilliant!



Headline w/ Icon Options

What we do at Pega is brilliant!






Headline w/ Left Icon Position (Deprecated)

What we do at Pega is brilliant!



Headline w/ Right Icon Position (Deprecated)

What we do at Pega is brilliant!

What we do at Pega is brilliant!

headline numbered

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.

1Without numberColor

2Without numberColor

3Without numberColor

4Without numberColor

Debug Panel