Bolt Design System

Overview

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

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`	—	—

Headline

Published

Overview

Install via NPM

Usage

Schema