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 or lora
size

Control the font-size. If size is not defined or set to auto, font-size inherits from parent container.

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

Control the PEGA brand color.

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

Alter the weight of the text.

string regular
  • extrabold, bold, semibold, 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