2.15.2

Headline

Headline Component

Published

History
View changes
Install
yarn add @bolt/components-headline
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/components-link @bolt/core-v3.x

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
Overview Usage Schema Edit this page Testing Steps

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