Bolt Design System

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>