2.9.2

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
  • bold, regular, semibold
Style

Font styles.

string normal
  • normal, italic
Size

Font size.

string medium
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
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