type docs

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

type

Basic Type The type element displays text in Pega branded typographic styles.
Important Notes: For regular body text, the type element is the same as a <p> HTML element. Only when additional branded typographic styles are needed, the type element should be used. There are many HTML elements to style inline text within a type element such as <em>, <strong>, <a>, <small>, <code>, and <kbd> to name a few.
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

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

Type Size Size defines the font-size of the type element.
Important Notes: If size is not defined or set to auto, font-size inherits from parent container. Each size is paired with a specific line-height to improve legibility. Below the medium breakpoint (below 800px device sizes), xxxlarge, display and largedisplaysizes, become that same size as xxlarge. This is to prevent the fonts from rendering too large relative to the screen size.
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 font weight

Type Weight Weight defines the font-weight of the type element.
Important Notes: If font weight is not defined, weight will be regular.
Demo

This font-weight is extrabold.

This font-weight is bold.

This font-weight is semibold.

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

Type Color Color defines the color of the type element.
Important Notes: If font color is not defined, the font color will be black. Due to accessiblity needs, it is not recommended to set the type. If color is altered on a typographical element, please use the contrast ratio to make sure if passes the contrast ratio for WCAG AA. Please note that below there is white type color on the white background and navy type color on the navy background which are not visible.
Demo
Light

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

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

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

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

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

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

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>

type use case numbered headlines

Use Case: Numbered Headlines Combine the List component, Shape element, and Type element to create numbered headlines.
Important Notes: Use the List component to create an inline list with tag set to div, spacing set to small, and nowrap set to true. Pass the Shape element with a bold number as the first list item. Pass the Type element as the second list item. Adjust the Shape and Type element’s size to create the desired design.
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>

type lora

Lora Type The type element displays the alternative Lora font family.
Important Notes: The font family of a type element can be adjusted by adding the class e-bolt-type--lora The Lora font does not support Extra Bold (font-weight: 800) or Light (font-weight: 300) font weights
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 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.',
  attributes: {
    'class': 'e-bolt-type--lora'
  }
} only %}
HTML
<p class="e-bolt-type e-bolt-type--lora">This is a type element with the Lora font family.</p>