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

npm install @bolt/elements-type

Dependencies

@bolt/core

Basic Type

The type element displays text in Pega branded typographic styles.

Demo

This is a type element. Use common inline HTML elements to emphasize, bold, link, and more.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element. Use common inline HTML elements to <em>emphasize</em>, <strong>bold</strong>, <a href="#!">link</a>, and more.'
} only %}
<p>If no props are set, the above is exactly the same as a <p> HTML element.</p>

HTML

<p class="e-bolt-type">This is a type element. Use common inline HTML elements to <em>emphasize</em>, <strong>bold</strong>, <a href="#!">link</a>, and more.</p>
<p>If no props are set, the above is exactly the same as a <p> HTML element.</p>

Type Tag

Tag defines the semantic tag of the type element.

Important Notes:

When semantics is independent of visual styles, the flexibility allows content authors to create all kinds of text layout. The tag prop only controls semantics, no visual styles are being defined.

Use <span> for inline text. Inline text can be nested inside another type element.

Use <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, or <div> for block text.

General HTML rules apply here, do not nest block text inside inline text or another block text unless it is a generic <div>.

Demo

This type element is a level 4 heading. No styles are defined so this looks like plain text.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This type element is a level 4 heading. No styles are defined so this looks like plain text.'
  tag: 'h4',
} only %}

HTML

<h4 class="e-bolt-type">This type element is a level 4 heading. No styles are defined so this looks like plain text.</h4>

Type Size

Size defines the font-size of the type element.

Demo

This is size auto.

This is size tiny.

This is size xsmall.

This is size small.

This is size regular.

This is size medium.

This is size large.

This is size xlarge.

This is size xxlarge.

This is size xxxlarge.

This is size display.

This is size largedisplay.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is size xxxlarge.'
  size: 'xxxlarge',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--size-xxxlarge">This is size xxxlarge.</p>

Type Weight

Weight defines the font-weight of the type element.

Demo

This font-weight is extrabold.

This font-weight is bold.

This font-weight is semibold.

This font-weight is medium.

This font-weight is regular.

This font-weight is light.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is font-weight extrabold.'
  weight: 'extrabold',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--weight-extrabold">This font-weight is extrabold.</p>

Type Color

Color defines the color of the type element.

Demo

Light Theme

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Dark Theme

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is teal color.'
  color: 'teal',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--color-teal">This color is teal.</p>

Type Hierarchy

Hierarchy defines specific recipes of typographic styles that create visual hierarchy amongst type elements.

Important Notes:

As mentioned before, tag controls semantics while hierarchy controls visual styles.

Using bold text is not the same as using headline hierarchy. Headline, subheadline, and eyebrow have specific typographic styles—color, spacing, and font—that differentiate them from basic text.

Using <strong> in tandem with subheadline hierarchy will create the same styles as headline hierarchy. This flexibility allows content authors to create mixed-weight headlines.

Eyebrow has one size only, because its main purpose is to be short complimentary info above the headline. Due to eyebrow text set to uppercase by design, it is recommended to set aria-label with the proper case to improve accessibility.

When setting size and hierarchy for a particular pair of headline and subheadline (or body text), make sure to set the headline at least one size larger than subheadline to create the visual hierarchy.

Demo

Teaser Text Group

Eyebrow

Headline (size xxxlarge and h1)

Subheadline (size xlarge and h2)

Body text (basic type element).

Mixed-weight Headlines

This entire sentence is a subheadline but part of it is bold

Headlines

This is size auto headline

This is size tiny headline

This is size xsmall headline

This is size small headline

This is size regular headline

This is size medium headline

This is size large headline

This is size xlarge headline

This is size xxlarge headline

This is size xxxlarge headline

This is size display headline

This is size largedisplay headline

This is size xlargedisplay headline

Subheadlines

This is size auto subheadline

This is size tiny subheadline

This is size xsmall subheadline

This is size small subheadline

This is size regular subheadline

This is size medium subheadline

This is size large subheadline

This is size xlarge subheadline

This is size xxlarge subheadline

This is size xxxlarge subheadline

This is size display subheadline

This is size largedisplay subheadline

This is size xlargedisplay subheadline

Eyebrow

This is an eyebrow

Body

This is size auto body text

This is size tiny body text

This is size xsmall body text

This is size small body text

This is size regular body text

This is size medium body text

This is size large body text

This is size xlarge body text

This is size xxlarge body text

This is size xxxlarge body text

This is size display body text

This is size largedisplay body text

This is size xlargedisplay body text

Twig

{# Teaser Text Group #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow',
  hierarchy: 'eyebrow',
  attributes: {
    'aria-label': 'Eyebrow',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline (size xxxlarge and h1)',
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline (size xlarge and h2)',
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Paragraph (basic type element).',
} only %}

{# Mixed-weight Headlines #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This entire sentence is a subheadline <strong>but part of it is bold</strong>',
  hierarchy: 'subheadline',
  tag: 'h1',
  size: 'xxxlarge',
} only %}

HTML

<!-- Teaser Text Group -->
<p class="e-bolt-type e-bolt-type--eyebrow" aria-label="Eyebrow">
  Eyebrow
</p>
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge">
  Headline (size xxxlarge and h1)
</h1>
<h2 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--xlarge">
  Subheadline (size xlarge and h2)
</h2>
<p class="e-bolt-type">
  Paragraph (basic type element).
</p>

<!-- Mixed-weight Headlines -->
<h1 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--size-xxxlarge">
  This entire sentence is a subheadline <strong>but part of it is bold</strong>
</h1>

Type with Icon

Icon can be appended before and/or after a paragraph of text. The Icon element is recommended for appending icons. However, an <img> element is also acceptable.

Important Notes:

Icon added via icon_before or icon_after are rendered to flow with text, so its size will grow or shrink with text size. The size prop for the Icon element is not supported in this scenario.

Instead of adding icons before and after the entire paragraph of text, it can also be done to inline text. To create inline text within a paragraph, set tag to span.

When writing plain HTML, all white space must be eliminated to have the text and icon align correctly. The markup must be written all in one line and spaces between HTML elements must be removed.

When writing plain HTML, <span class="e-bolt-type__icon-before"> and <span class="e-bolt-type__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.

Demo

Block Text

Eyebrow with an icon before

Headline with an icon after

Subheadline with an icon before and after

Inline Text

This is a paragraph of text. In the middle of it, it has inline text with icons. This inline text is a type element with its tag set to span.

Twig

{% set icon_pega_thumbs_up %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-thumbs-up',
    size: 'large',
  } only %}
{% endset %}
{% set icon_pega_timer %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-timer',
  } only %}
{% endset %}
{% set icon_arrow_left %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'arrow-left',
  } only %}
{% endset %}

{# Block Text #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow with an icon before',
  icon_before: icon_arrow_left,
  hierarchy: 'eyebrow',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline with an icon after',
  icon_after: icon_pega_thumbs_up,
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline with an icon before and after',
  icon_before: icon_pega_timer,
  icon_after: icon_pega_thumbs_up,
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
} only %}

{# Inline Text #}
{% set inline_text %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'inline text with icons',
    icon_before: icon_pega_timer,
    icon_after: icon_pega_thumbs_up,
    tag: 'span',
  } only %}
{% endset %}
{% set spaceless_inline_text %}{% apply spaceless %}{{ inline_text }}{% endapply %}{% endset %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has ' ~ spaceless_inline_text ~ '. This inline text is a type element with its tag set to <code>span</code>.',
} only %}

HTML

<!-- Block Text -->
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge"><span class="e-bolt-type__icon-before"><!-- Icon or image markup --></span>Subheadline with an icon before and after<span class="e-bolt-type__icon-after"><!-- Icon or image markup --></span></h1>

<!-- Inline Text -->
<p class="e-bolt-type">This is a paragraph of text. In the middle of it, it has <span class="e-bolt-type"><span class="e-bolt-type__icon-before"><!-- Icon or image markup --></span>inline text with icons<span class="e-bolt-type__icon-after"><!-- Icon or image markup --></span></span>. This inline text is a type element with its tag set to <code>span</code>.</p>

Headline Links

Link styles for headline, subheadline, and eyebrow.

Important Notes:

Turn headline, subheadline, and eyebrow into links by passing proper HTML attributes via link_attributes. Same as Text Link element, depending on if the <a> or the <button> HTML element is being used, the proper HTML attributes should be passed.

Headline, subheadline, and eyebrow links created this way will utilize the reversed underline style from the Text Link element, icon is recommended to be used as a visual cue while underline is not visible. The twig template has reversed underline on by default, however, when writing plain HTML, this style needs to be written out manually using appropriate Text Link modifier classes.

link_attributes will turn the entire paragraph of text into a link, so it is not recommended for body text links. Instead, use the Text Link element or <a> HTML element for inline links within a paragraph of text.

Demo

Block Link

Eyebrow link

Headline link

Subheadline link

Inline Link

This is a paragraph of text. In the middle of it, it has an inline link. This inline link can be a Text Link element or an HTML anchor element.

Twig

{% set icon_chevron_right %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'chevron-right',
  } only %}
{% endset %}

{# Block Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow link',
  hierarchy: 'eyebrow',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline link',
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline link',
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}

{# Inline Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has <a href="#!">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.',
} only %}

HTML

<!-- Block Link -->
<h1 class="e-bolt-type e-bolt-type--size-xxxlarge e-bolt-type--headline"><a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">Headline link<span class="e-bolt-text-link__icon-after"><!-- Icon or image markup --></span></a></h1>

<!-- Inline Link -->
<p class="e-bolt-type">This is a paragraph of text. In the middle of it, it has <a href="#!" class="e-bolt-text-link">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.</p>

Use Case: Numbered Headlines

Combine the List component, Shape element, and Type element to create numbered headlines.

Demo

1

Numbered headline xxxlarge

1

Numbered headline xxlarge

Twig

{% set number %}
  {% include '@bolt-elements-shape/shape.twig' with {
    content: '<strong>1</strong>',
    size: 'small',
    attributes: {
      class: 't-bolt-teal',
    },
  } only %}
{% endset %}
{% set headline %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'Numbered headline xxlarge',
    hierarchy: 'headline',
    tag: 'h4',
    size: 'xxlarge',
  } only %}
{% endset %}
{% include '@bolt-components-list/list.twig' with {
  display: 'inline',
  nowrap: true,
  spacing: 'small',
  items: [
    number,
    headline,
  ],
} only %}

HTML

<bolt-list display="inline" tag="div" spacing="small" nowrap>
  <bolt-list-item>
    <span class="e-bolt-shape"><span class="e-bolt-shape__content"><strong>1</strong></span></span>
  </bolt-list-item>
  <bolt-list-item>
    <h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge">Numbered headline</h1>
  </bolt-list-item>
</bolt-list>

Lora Type

The type element displays the alternative Lora font family.

Demo

Lora/Open Sans Comparison.

This is a type headline with the Open Sans.

This is a type headline with the Lora.

Lora Weights and Styles.

This Lora font is bold.

This Lora font is bold and italicized.

This Lora font is semibold.

This Lora font is semibold and italicized.

This Lora font is medium.

This Lora font is medium and italicized.

This Lora font is regular.

This Lora font is regular and italicized.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element with the Lora font family.',
  font_family: 'lora',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--lora">This is a type element with the Lora font family.</p>

Chakra Petch Type

The type element displays the alternative Chakra Petch font family.

Demo

Chakra Petch/Open Sans Comparison.

This is a type headline with the Open Sans.

This is a type headline with the Chakra Petch.

Chakra Petch Weights and Styles.

This Chakra Petch font is bold.

This Chakra Petch font is bold and italicized.

This Chakra Petch font is semibold.

This Chakra Petch font is semibold and italicized.

This Chakra Petch font is medium.

This Chakra Petch font is medium and italicized.

This Chakra Petch font is regular.

This Chakra Petch font is regular and italicized.

This Chakra Petch font is light.

This Chakra Petch font is light and italicized.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element with the Chakra Petch font family.',
  font_family: 'chakrapetch',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--chakrapetch">This is a type element with the Chakra Petch font family.</p>

type

type docs

Type

Pega branded typography.

type

type tag

This type element is a level 4 heading. No styles are defined so this looks like plain text.

type size

type font weight

type color

type hierarchy

Headline (size xxxlarge and h1)

Subheadline (size xlarge and h2)

This entire sentence is a subheadline but part of it is bold

type with icon

Headline with an icon after

Subheadline with an icon before and after

type headline links

Headline link

Subheadline link

type use case numbered headlines

Numbered headline xxxlarge

Numbered headline xxlarge

type lora

Lora/Open Sans Comparison.

Lora Weights and Styles.

type chakra petch

Chakra Petch/Open Sans Comparison.

Chakra Petch Weights and Styles.

type

type docs Show Code Hide Code

Type

Pega branded typography.

type Show Code Hide Code

type tag Show Code Hide Code

This type element is a level 4 heading. No styles are defined so this looks like plain text.

type size Show Code Hide Code

type font weight Show Code Hide Code

type color Show Code Hide Code

type hierarchy Show Code Hide Code

Headline (size xxxlarge and h1)

Subheadline (size xlarge and h2)

This entire sentence is a subheadline but part of it is bold

type with icon Show Code Hide Code

Headline with an icon after

Subheadline with an icon before and after

type headline links Show Code Hide Code

Headline link

Subheadline link

type use case numbered headlines Show Code Hide Code

Numbered headline xxxlarge

Numbered headline xxlarge

type lora Show Code Hide Code

Lora/Open Sans Comparison.

Lora Weights and Styles.

type chakra petch Show Code Hide Code

Chakra Petch/Open Sans Comparison.

Chakra Petch Weights and Styles.

type docs

type

type tag

type size

type font weight

type color

type hierarchy

type with icon

type headline links

type use case numbered headlines

type lora

type chakra petch