2.16.2

Text

Text Component in Bolt

Published

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

Overview

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

  <bolt-text>
  This is text.
</bolt-text>

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)
Attributes

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

 object —
  • —
Text *

Text content of the headline.

 string —
  • —
Tag

HTML semantic tags.

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

Inline text or a block of text.

 string block
  • inline or block
Color

Text color in context of theme colors.

 string theme-body
  • theme-headline or theme-body
Align

Text alignment.

 string inherit
  • inherit, start, center, end
Opacity

Opacity level.

 number 100
  • 100, 80, 60, 40, 20
Quoted

Quoted text.

 boolean false
  • true or false
Line-height

Line height in context of the typographic design.

 string regular
  • tight, regular, loose
Letter-spacing

Letter spacing in context of the typographic design.

 string regular
  • narrow, regular, wide
Text-transform

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.

 string regular
  • regular, uppercase, lowercase, capitalize
Font-family

Font family in context of the typographic design.

 string body
  • headline, body, code
Font-size

Font size in context of the typographic design.

 string medium
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
Font-weight

Font weight in context of the typographic design.

 string regular
  • regular, semibold, bold
Font-style

Emphasized text.

 string regular
  • regular or italic
Headline

A preset for headlines in context of the typographic design.

 boolean false
  • true or false
Subheadline

A preset for subheadlines in context of the typographic design.

 boolean false
  • true or false
Eyebrow

A preset for eyebrow in context of the typographic design.

 boolean false
  • true or false
Url

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

 string —
  • —
Util

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

 array —
  • —
Debug Panel