2.5.6

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 or object or 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
  • bold, regular, semibold
style

Font styles.

 string normal
  • normal or italic
size

Font size.

 string medium
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
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 or string or string —
  • —
quoted

Adds quoted styling to text.

 boolean —
  • —