headline docs

Headline

Specific combinations of typographic styles for displaying text.

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
Prop Name Description Type Default Value Option(s)
text *

Renderable text content of the headline.

string , object , array
tag

Set the semantic HTML tag for the headline.

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

Any valid anchor element attribute can be used. For example: href, target, rel, etc.

object
align

Set the text alignment of the headline.

string
  • left, center, right
weight

Set the weight of the headline.

string regular
  • light, bold, regular, semibold
style

Set the style fo the headline.

string normal
  • normal or italic
size

Set the size of the headline.

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
icon

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

object , string , string
quoted

Adds quoted styling to text.

boolean
number_text

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
number_color

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

string
  • teal, navy, orange, violet
numberText
(deprecated)

Use number_text instead.

numberColor
(deprecated)

Use number_color instead.

url
(deprecated)

Use link_attributes instead.

target
(deprecated)

Use link_attributes instead.

Install Install
npm install @bolt/components-headline
Dependencies @bolt/core @bolt/elements-icon @bolt/elements-text-link

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

headline tag variations

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.

headline align variations

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 icon variations

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!

headline quoted variation

What we do at Pega is brilliant!

headline numbered

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