Type

Pega branded typography.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element.'
} only %}
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 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
size

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

string auto
  • auto, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
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-v3.x