Text

Getting Started

Text component v2. This is still in progress and only available as a web component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-text

Usage

  
  This is text.

Schema

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

 N/A
text* string

Text content of the headline.

 N/A
tag string
  • h1, h2, h3, h4, h5, h6, p, div, span, cite

HTML semantic tags.

 p
display string
  • inline OR block

Inline text or a block of text.

 block
color string
  • theme-headline OR theme-body

Text color in context of theme colors.

 theme-body
align string
  • inherit, start, center, end

Text alignment.

 inherit
opacity number
  • 100, 80, 60, 40, 20

Opacity level.

 100
quoted boolean
  • TRUE OR FALSE

Quoted text.

 false
line-height string
  • tight, regular, loose

Line height in context of the typographic design.

 regular
letter-spacing string
  • narrow, regular, wide

Letter spacing in context of the typographic design.

 regular
text-transform string
  • regular, uppercase, lowercase, capitalize

Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.

 regular
font-family string
  • headline, body, code

Font family in context of the typographic design.

 body
font-size string
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge

Font size in context of the typographic design.

 medium
font-weight string
  • regular, semibold, bold

Font weight in context of the typographic design.

 regular
font-style string
  • regular OR italic

Emphasized text.

 regular
headline boolean
  • TRUE OR FALSE

A preset for headlines in context of the typographic design.

 false
subheadline boolean
  • TRUE OR FALSE

A preset for subheadlines in context of the typographic design.

 false
eyebrow boolean
  • TRUE OR FALSE

A preset for eyebrow in context of the typographic design.

 false
url string

If provided, turns headline into a link to given url.

 N/A
util array

Each item in the array will build a utility class. No need to include u-bolt-. For the web component use comma separated string.

 N/A