Bolt Design System

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	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`	—	—
numberText	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`	—	—
numberColor	The optional background color of the Headline bullet. Uses inherited theme colors if unspecified.	`string`	—	`teal` , `indigo` , `orange` , `purple`

Install

  npm install @bolt/components-headline

Dependencies

@bolt/components-icon

@bolt/components-link

@bolt/core-v3.x

Headline

Specific combinations of typographic styles for displaying text.