headline docs

Headline

Getting Started

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

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

Name Type Value(s) Description Default
text* string OR object OR array

Renderable text content of the headline.

 N/A
tag string
  • h1, h2, h3, h4, h5, h6, p, span, cite, div

Html tag.

 p
align string
  • left, center, right

Text alignment.

 N/A
weight string
  • bold, regular, semibold

Font weights.

 regular
style string
  • normal OR italic

Font styles.

 normal
size string
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge

Font size.

 medium
transform string
  • uppercase, lowercase, capitalize

Text transformation.

 N/A
url string

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

 N/A
icon object OR string OR string

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

 N/A
quoted boolean

Adds quoted styling to text.

 N/A

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

headline tag variations

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

headline align variations

Align:

This is an example of align left

Align:

This is an example of align center

Align:

This is an example of align right

headline style and weight variations

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

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!

headline quoted variation

What we do at Pega is brilliant!