2.21.1

Headline

Headline Component

Published

History
View changes
Install
yarn add @bolt/components-headline
Source code
View on Github
Dependencies

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