Type

Pega branded typography.
Twig Usage 
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element.'
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content

Content of the type element.

 any —
  • —
tag

Set the semantic tag for the type element. Use span for inline text; use p, h1, h2, h3, h4, h5, h6, or div for block text. There is no restrictions with this prop, developers must understand semantic HTML to apply the appropriate tag based on the use case.

 string p
  • —
font_family

Choose the font family. Defaults to Open Sans

 string opensans
  • opensans, lora, chakrapetch
size

Control the font-size. If size is not defined or set to auto, font-size inherits from parent container. Note that xlargedisplay size is available only for Lora font-family

 string auto
  • auto, tiny, xsmall, small, regular, medium, large, xlarge, xxlarge, xxxlarge, display, largedisplay, xlargedisplay
color

Control the PEGA brand color.

 string —
  • navy, teal, orange, yellow, wine, pink, berry, gray, black, white
weight

Alter the weight of the text. Note that extrabold and light are available only for Open Sans font-family size is available only for Lora font-family

 string regular
  • extrabold, bold, semibold, medium, regular, light
hierarchy

Control the hierarch of text. Each option comes with specific typographic styles.

 string body
  • body, headline, subheadline, eyebrow
icon_before

Append an icon before the text. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_after

Append an icon after the text. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
Install Install 
npm install @bolt/elements-type
Dependencies @bolt/core