Type

Pega branded typography.

Published

Last updated: 5.5.0

Github

NPM

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`	—
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

npm install @bolt/elements-type

Dependencies

@bolt/core-v3.x

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

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.

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

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

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>

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="#!">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.

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>

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

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 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 docs

type

type tag

type size

type hierarchy

type with icon

type headline links

type use case numbered headlines