Headline

Specific combinations of typographic styles for displaying text.

Published Last updated: 4.7.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

Set the semantic HTML tag for the headline.

 string p
  • h1, h2, h3, h4, h5, h6, p, span, cite, div
align

Set the text alignment of the headline.

 string —
  • left, center, right
weight

Set the weight of the headline.

 string regular
  • light, bold, regular, semibold
style

Set the style fo the headline.

 string normal
  • normal or italic
size

Set the size of the headline.

 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
  • —
target

A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.

 string _self
  • _blank, _self, _parent, _top, framename
transform

Text transformation.

 string —
  • uppercase, lowercase, capitalize
url

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.

 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, navy, orange, purple
Install Install 
npm install @bolt/components-headline
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/elements-text-link