Headline

Specific combinations of typographic styles for displaying text.

Published Last updated: 2.26.0 Change log Github NPM
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
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
Install Install
  npm install @bolt/components-headline
Dependencies @bolt/components-icon @bolt/components-link @bolt/core-v3.x