2.23.0

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
Overview Usage Schema Edit this page Testing Steps
  {% 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
  • 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
Debug Panel