Headline

Specific combinations of typographic styles for displaying text.

Published Last updated: 2.25.0 Change log Github NPM

Twig Usage {% 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 %} Schema 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

Install Install npm install @bolt/components-headline Dependencies @bolt/components-icon @bolt/components-link @bolt/core-v3.x

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

This headline is <h1> and xxxlarge size

This headline is <h2> and xxlarge size

This headline is <h3> and xlarge size

This headline is <h4> and large size

This headline is <h5> and small size

This headline is <h6> and xsmall size

This text is <p> and medium size.

Medium is the body font-size, it should never be used for headlines.

This headline is aligned left

This headline is aligned center

This headline is aligned right

This is light weight and normal text

This is light weight and italic text

This is bold weight and normal text

This is bold weight and italic text

This is regular weight and normal text

This is regular weight and italic text

This is semibold weight and normal text

This is semibold weight and italic text

Headline and subheadline have predefined weights, do not modify them without consulting a designer.

Headline w/ Icon Position before

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

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!

Left and right options are deprecated, please stop using these.

(Deprecated) Headline w/ Left Icon Position

What we do at Pega is brilliant!

(Deprecated) Headline w/ Right Icon Position

What we do at Pega is brilliant!

This headline is a link, with Default Icon

This headline is also a link, with Defined Icon

This headline is also a link, without an Icon

What we do at Pega is brilliant!

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 %}

---

---

Icons Supported

1 Numbered 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 indigo, purple, teal, or orange, you can choose the background color of the Headline Number.

---

Theming

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