type docs

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

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. Demo

This is size auto.

This is size xxsmall.

This is size xsmall.

This is size small.

This is size medium.

This is size large.

This is size xlarge.

This is size xxlarge.

This is size xxxlarge.

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--xxxlarge">This is size xxxlarge.</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 xxsmall headline

This is size xsmall headline

This is size small 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

Subheadlines

This is size auto subheadline

This is size xxsmall subheadline

This is size xsmall subheadline

This is size small 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

Eyebrow

This is an eyebrow

Body

This is size auto body text

This is size xxsmall body text

This is size xsmall body text

This is size small 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

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--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--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 %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has ' ~ inline_text|spaceless ~ '. 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--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>
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--xxxlarge">Numbered headline</h1>
  </bolt-list-item>
</bolt-list>