Text

Pega branded typography system.

Published Last updated: 2.24.1 Change log Github NPM
Twig 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 —
  • —
Install Install 
  npm install @bolt/components-text
Dependencies @bolt/components-link @bolt/core-v3.x @bolt/lazy-queue