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