article

article docs

Article

An editorial container that styles children HTML elements.

Twig Usage
{% include '@bolt-elements-article/article.twig' with {
  content: 'This is an article.',
} only %}
Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
content *

Content of the article.

any
tag

Set the HTML tag for the content container.

string article
  • article or div
Install Install
npm install @bolt/elements-article
Dependencies @bolt/core

article

Basic Article An Article element can be used for any free-form content areas where a WYSIWYG editor is enabled. Basic HTML elements are styled within the Article element.
Important Notes: Even though plain <table> elements are styled, they are not responsive. Please wrap all <table> elements with <bolt-table> web component to enable responsive styles (JavaScript required). View Table ComponentAs for <pre> and <code> elements, they do not have syntax highlighting. To enable syntax highlighting, please use <code> web component instead (JavaScript required). View Code Snippet Component
Demo

The is a list of all supported plain HTML elements:

  • p
  • dl
  • ol
  • ul
  • header
  • section
  • h1 ~ h6
  • blockquote
  • details
  • figure
  • small
  • table
  • code
  • kbd
  • pre
  • hr

The following is a kitchen sink of all supported plain HTML elements:

H1 heading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text
H6 heading text

Text: bold, italic, linked, code, kbd, small, superscript, subscript.

  • First level unordered item
  • First level unordered item
    1. Second level ordered item
      • Third level unordered item
      • Third level unordered item
    2. Second level ordered item
  • First level unordered item
  1. First level ordered item
  2. First level ordered item
    • Second level unordered item
      1. Third level ordered item
      2. Third level ordered item
    • Second level unordered item
  3. First level ordered item
  1. First level ordered item 1
  2. First level ordered item 2
    1. Second level ordered item 1
    2. Second level ordered item 2
      1. Third level ordered item 1
      2. Third level ordered item 2
        1. Fourth level ordered item 1
        2. Fourth level ordered item 2
          1. Fifth level ordered item 1
          2. Fifth level ordered item 2
            1. Sixth level ordered item 1
            2. Sixth level ordered item 2
            3. Sixth level ordered item 3
          3. Fifth level ordered item 3
        3. Fourth level ordered item 3
      3. Third level ordered item 3
    3. Second level ordered item 3
  3. First level ordered item 3
Summary sums up the details

Details elaborate on the summary.

Definition list
A list of text and description.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
pre {
  padding: .5em 1em; color: black; border-left: 5px solid; background-color: white;
}

Pull Quote. Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.

The time is always right to do what is right.

Figure caption
Col1 Col2 Col3
Row1 Row1 Row1
Row2 Row2 Row2
Twig
// Render content
{% set article_content %}
  <h1>
    H1 heading text
  </h1>
  <h2>
    H2 heading text
  </h2>
  <h3>
    H3 heading text
  </h3>
  <h4>
    H4 heading text
  </h4>
  <h5>
    H5 heading text
  </h5>
  <h6>
    H6 heading text
  </h6>
  <p>
    Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>.
  </p>
{% endset %}

// Pass content to the component and set proper HTML tag
{% include '@bolt-elements-article/article.twig' with {
  content: article_content,
  tag: 'article',
} only %}
HTML
<article class="e-bolt-article">
  <h1>
    H1 heading text
  </h1>
  <h2>
    H2 heading text
  </h2>
  <h3>
    H3 heading text
  </h3>
  <h4>
    H4 heading text
  </h4>
  <h5>
    H5 heading text
  </h5>
  <h6>
    H6 heading text
  </h6>
  <p>
    Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>.
  </p>
</article>

button docs

Button

A graphical element that indicates interactivity.

Twig Usage
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'submit'
  }
} only %}
Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
content *

Content of the button.

any
icon_before

Append an icon before the button content. Icon element is recommended. However, <img> elements are also acceptable.

any
icon_after

Append an icon after the button content. Icon element is recommended. However, <img> elements are also acceptable.

any
icon_only

Append an icon to the button content and visually hide the text content. This prop trumps icon_before and icon_after.

any
hierarchy

Style the button appropriately based on information hierarchy.

string primary
  • primary, secondary, tertiary, quaternary, transparent
size

Control the font-size and padding of the button.

string medium
  • xsmall, small, medium, large
border_radius

Control the border radius of the button.

string small
  • small, large, full
display

Control the display of the button.

string inline
  • inline, block, inline@from-small
background_color

Control the background color of the button. This has effect only on the buttons with hierarchy set to primary.

string
  • navy, teal, orange, yellow, wine, pink, berry, violet, gray-xlight, black, white
hasLoader

When set to true includes additional markup required to show the loading indicator.

boolean
Install Install
npm install @bolt/elements-button
Dependencies @bolt/core

button

Basic Button A button is generally an inline interactive graphical element. Its main purpose is to help the user perform a function (sometimes navigate). <button class="e-bolt-button"> is acceptable at rendering a button, though the Twig template is the recommended usage for Drupal.
Important Notes: Only text should be passed to the content prop. However, <span>, <em>, and <strong> elements can be used. Button element is a replacement for the Button component.
Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button">This is a button</button>

button attributes

HTML Attributes for Button Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed.
Important Notes: <a> requires the href attribute. <button> requires the type attribute. This button example has the href, target, rel, and id attributes
Demo Example Button
Twig
// <button>
{% include '@bolt-elements-button/button.twig' with {
  content: 'This button has the "type" attribute',
  attributes: {
    type: 'submit',
  }
} only %}

// <a>
{% include '@bolt-elements-button/button.twig' with {
  content: 'This button has the "href", "target", and "id" attributes',
  attributes: {
    href: 'https://google.com',
    target: '_blank',
    rel: 'noopener',
    id: 'js-bolt-some-unique-id'
  }
} only %}
HTML
<a href="https://google.com" target="_blank" rel="noopener" id="js-bolt-some-unique-id" class="e-bolt-button">This button has the "href", "target", "rel", and "id" attributes</a>

button with icon

Button with Icon Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. The icon element is recommended for appending icons. However, an <img> element is also acceptable.
Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size prop for the icon element is not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="e-bolt-button__icon-before"> and <span class="e-bolt-button__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

Twig
// Icon vars
{% set icon_custom %}
  <img src="/images/placeholders/square.jpg">
{% endset %}
{% set icon_chevron_down %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'chevron-down',
  } only %}
{% endset %}

// Button include
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button with icons before and after',
  icon_before: icon_custom,
  icon_after: icon_chevron_down,
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button"><span class="e-bolt-button__icon-before"><!-- Icon or image markup --></span>This is a button with icons before and after<span class="e-bolt-button__icon-after"><!-- Icon or image markup --></span></button>

button with icon only

Icon Only Button Icon only button visually hides the text content of the button. Such a button should be used sparingly and only in places where screen real estate is a concern.
Important Notes: It is recommended that icon only buttons to be used in tandem with tooltip to give the user more context about the button’s function. When writing in plain HTML, aria-label is required to render the button text. For example: <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download">. Text should not be used inside the button when using aria-label. When writing in plain HTML, <span class="e-bolt-button__icon-center"> is required to wrap around the icon markup. The wrapper ensures that the icon will always center within the button.
Demo File size: 25MB Add another row
Twig
// Icon only button combined with tooltip
{% set icon_download %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'download',
  } only %}
{% endset %}
{% set tooltip_trigger %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Download',
    icon_only: icon_download,
    attributes: {
      type: 'button'
    }
  } only %}
{% endset %}
{% include '@bolt-components-tooltip/tooltip.twig' with {
  trigger: tooltip_trigger,
  content: 'File size: 25MB',
} only %}
HTML
// Icon only button combined with tooltip
<bolt-tooltip>
  <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download">
    <span class="e-bolt-button__icon-center"><!-- Icon or image markup --></span>
  </button>
  <span slot="content">File size: 25MB</span>
</bolt-tooltip>

button hierarchy

Button Hierarchy A button can be assigned to various levels of the content hierarchy based on the information architecture of the layout.
Important Notes: Transparent button is the lowest in the hierarchy level. This style has the lowest affordances and it should NEVER be used alone. Always pair it with a button of another hierarchy.
Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a secondary button',
  hierarchy: 'secondary',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--secondary">This is a secondary button</button>

button size

Button Size A button’s size can be modified per use case. Demo
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a small button',
  size: 'small',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--small">This is a small button</button>

button border radius

Button Border Radius Rounded buttons are possible with the border_radius prop. Demo
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a fully rounded button',
  border_radius: 'full',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--border-radius-full">This is a fully rounded button</button>

button display

Button Display The display of a button can be changed from inline to block (full width), and there is an extra option to make it transform from inline to block at the small breakpoint.
Important Notes: When display prop is set to inline@from-small, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below.
Demo
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a full width button',
  display: 'block',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--block">This is a full width button</button>

button upload

Upload Button The button classes can also be used on a file input.
Important Notes: This is an advanced use case and the Twig template does not support this. Hierarchy should be set to tertiary. Size should be set to small.
Demo
Twig
Not available in Twig. Please use plain HTML.
HTML
<input id="unique-file-id" type="file" class="e-bolt-button e-bolt-button--small e-bolt-button--tertiary">

button background color

Button Background Color Background color can be set on the button using background_color prop.
Important Notes: This has effect only on the buttons which hierarchy is primary.
Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a primary button',
  background_color: 'teal',
  attributes: {
    type: 'button'
  }
} only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--secondary t-bolt-teal">This is a primary button</button>

button loading state

Button loading state The indicator of loading.
Important Notes: By setting the prophasLoader to true, the additional markup is added to the button container to use the loader indicator. To assist screen readers, also the aria-busy attribute is added. To trigger the loading indicator add the e-bolt-button--is-loading class via JavaScript. For accessibility, also set aria-busy to true. Once you are done loading, remove the loading class and set aria-busy to false. When the button is clicked, the button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.
Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'Loading state',
  attributes: {
    type: 'button',
  }
  hasLoader: true,
} only %}
HTML
<button type="button" class="e-bolt-button" aria-busy="false">Loading state <span class="e-bolt-button__loading-spinner" aria-hidden="true"></span></button>

figure docs

Figure

A media container for a complimentary graphic within an article.

Twig Usage
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/square.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}
{% include '@bolt-elements-figure/figure.twig' with {
  content: image,
  caption: 'Figure caption.'
} 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

Pass in any renderable content. The recommended content types are image, video, table or icon

string , object , array
caption

Caption for the figure.

string , object , array
Install Install
npm install @bolt/elements-figure
Dependencies @bolt/core

figure

Basic Figure A media container for a complimentary graphic within an article. Demo
Light Theme
Fig. 1: This is an image.
Dark Theme
Fig. 1: This is an image.
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9-640.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}

{% include '@bolt-elements-figure/figure.twig' with {
  content: image,
  caption: 'Fig. 1: This is an image.'
} only %}
HTML
<figure class="e-bolt-figure">
  <img src="/images/placeholders/16x9-640.jpg" loading="lazy" class="e-bolt-image">
  <figcaption class="e-bolt-figure__caption">Fig. 1: This is an image.</figcaption>
</figure>
Figure with Content Variation Anything of use can be passed into the content property. Demo
Fig. 2: This is a video.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
Fig. 3: This is a table.
Twig
{% set content %}
    {% set video %}
      <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="4892122320001" data-media-title data-media-duration controls class="c-base-video"></video-js>
    {% endset %}

    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: video,
      ratio: 'wide'
    } only %}
  {% endset %}

{% include '@bolt-elements-figure/figure.twig' with {
  content: content,
  caption: 'Fig. 2: This is a video.'
} only %}
HTML
<figure class="e-bolt-figure">
  <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="4892122320001" data-media-title data-media-duration controls class="c-base-video"></video-js>
  <figcaption class="e-bolt-figure__caption">Fig. 2: This is a video.</figcaption>
</figure>

icon docs

Icon

Inline SVG icon system.

Twig Usage
{% include '@bolt-elements-icon/icon.twig' with {
  name: 'bell-solid',
} only %}
Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
name

Name of Icon. Please note that currently Twitter, after rebranding, from July 2023 operating under the name X

string
  • add-circle, add-single, add-solid, add, agile, agile2, agriculture, ambulance, app-code, app-development, app-search, arrow-down, arrow-left, arrow-right, arrow-up, balance, bar-chart-circle, bar-chart-growth, bar-chart, bell-solid, bell, bicycle, bold-chevron-double, bold-chevron, bolt-logo-colored, box-open, briefcase, bullseye, calendar-solid, calendar, car, cart-solid, case-management, cell-tower, center-out, certification, check-circle, check-single, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, clock-solid, close-circle, close-single, close-solid, close, closed-caption-solid, closed-caption, cloud-solid, cloud, co-browse, coffee, collaboration, communications, contract, copy-to-clipboard, credit-card, cube, currency, customer-decision-hub, customer-onboarding, customer-service, customer, dashboard, data-integrations-encrypted, data-integrations, decisioning, directional-down, directional-left, directional-right, directional-up, documentation, dollar-circle, download-cloud, download, email, energy, entertainment, exclamation, exclamation-solid, external-link, eye-off-solid, eye-off, eye-solid, eye, face-happy, face-sad, facebook-circle, facebook-solid, facebook, farmhouse, fast, fast-delivery, filter, filter-solid, financial, flag, flag-solid, forward, full-screen-off, full-screen-on, gavel, genai-analyze, genai-automate, genai-autopilot, genai-blueprint, genai-cdh, genai-coach, genai-knowledge-buddy, genai-socrates, github-circle, github-solid, github, globe-circle, globe, government, grid, growth, health-chart, health, healthcare, heart-solid, heart, hospital, hospital-bed, hospitality, house, ideas, imbalance, industries, info-circle, info-solid, insurance, integration, intelligent-automation, intelligent-virtual-assistant, interactive, java, key, knowledgebase, laptop, life-sciences, link, linkedin-circle, linkedin-solid, linkedin, list, loading, lock, lock-solid, manufacturing, map-pin, map-pin-solid, media, menu, meteor, mining, minus, minus-circle, minus-single, minus-solid, mobility, molecule, money, money-bag, more-vertical, more, multiple-case-management, network-solid, network, omni-channel, orbit, package, parent-child-case, partners, path, pause-solid, pause, pega-announce, pega-book, pega-building-complex, pega-building, pega-cart, pega-catalyst, pega-chat-double-question, pega-chat-double-typing, pega-chat-double, pega-chat-question, pega-chat-square-double-question, pega-chat-square-double-typing, pega-chat-square-double, pega-chat-square-question, pega-chat-square-typing, pega-chat-square, pega-chat-typing, pega-chat, pega-compass, pega-connection-hierarchy, pega-cosmos, pega-database, pega-disability, pega-download-pdf, pega-handshake, pega-health-shield, pega-hub, pega-instructor, pega-map, pega-mention, pega-network, pega-patterns, pega-people, pega-phone-call, pega-phone-ringing, pega-pie-chart, pega-pin-drop-circle, pega-pin-drop, pega-pin, pega-plane, pega-process-ai, pega-process-fabric, pega-process-mining, pega-send-submit, pega-setting, pega-shuffle, pega-subtitles-solid, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pencil-solid, pencil, personal-chart, personalized, phone-call-solid, phone-call, picture, platform, play-solid, play, podcast-solid, podcast, prembridge, presentation, print, product-delivery, refresh, reload, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, setting-solid, share-solid, share, small-business, sort-descending, sort, speed-dial, star-solid, star, support, system-admin, target, text-align-center, text-align-left, text-align-right, tools, transportation, trash-solid, trash, triangle, trophy, truck, twitter-solid, twitter, unlock-solid, unlock, upload-cloud, upload, user-interface, user-solid, user, video-solid, video, warning-solid, warning, watch, pega-wifi, workflow, workforce-intelligence, x-circle, x-solid, x, youtube-circle, youtube-solid, youtube
custom_icon_path

Full source path to the custom icon.

string
size

Set icon size. If size is not set, the icon size will default to text size.

string
  • small, medium, large, xlarge
color

Set the icon color. If color is not set, the icon will default to text color.

string
  • teal, navy, yellow, orange, pink, berry, wine, violet
Install Install
npm install @bolt/elements-icon
Dependencies @bolt/core svgson

icon

Basic Icon An Icon is an inline SVG element. <svg class="e-bolt-icon"> is acceptable at rendering an icon, though the Twig template is the recommended usage for Drupal.
Important Notes: Icon element is a replacement for the Icon component. When writing inline SVG manually using <svg> HTML element, be sure to minifiy the SVG, add the element class class="e-bolt-icon", and add the attribute aria-hidden="true". Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Light Theme All Icons

Add circle

Keywords: plus, add, add circle, outline

Add single

Keywords: plus, add

Add solid

Keywords: plus, solid plus, add

Add

Keywords: plus, add

Agile

Keywords: agile, arrow

Agile2

Keywords: scrum, workflow, iteration, project, collaboration

Agriculture

Keywords: agriculture, crops, harvest, silo, field

Ambulance

Keywords: emergency, medical, healthcare, rescue, first aid

App code

Keywords: app development, add, interface, code

App development

Keywords: app development, add, interface, plus

App search

Keywords: app development, add, interface, search

Arrow down

Keywords: arrow, arrow down, down

Arrow left

Keywords: arrow, arrow left, left

Arrow right

Keywords: arrow, arrow right, right

Arrow up

Keywords: arrow, arrow up, up

Balance

Keywords: justice, equality, law, balance, fairness

Bar chart circle

Keywords: round, data

Bar chart growth

Keywords: data, graph, analysis, statistics, comparison

Bar chart

Keywords: bar chart, diagram, chart, results

Bell solid

Keywords: bell, bell solid

Bell

Keywords: bell, bell light

Bicycle

Keywords: bike, transportation, cycling, ride, outdoor

Bold chevron double

Keywords: arrow, direction, work flow, pointer, forward

Bold chevron

Keywords: arrow, direction, work flow, pointer, forward

Bolt logo colored

Keywords: design system

Box open

Keywords: package, delivery, container, unbox, storage

Briefcase

Keywords: briefcase, case, case type

Bullseye

Keywords: Academy, go to market, marketing, sales, direct, bullseye, arrow

Calendar solid

Keywords: calendar, calendar solid, event, date

Calendar

Keywords: calendar, calendar light, event, date

Car

Keywords: vehicle, transportation, drive, automobile, road

Cart solid

Keywords: cart, cart solid, shopping, commerce, checkout

Case management

Keywords: file, directory, storage, document

Cell tower

Keywords: communication, signal, broadcast, network, telecommunication

Center out

Keywords: expand, focus, radiate, distribute, outward

Certification

Keywords: certification, award, badge, approved, academy

Check circle

Keywords: check, approved, check circle, correct

Check single

Keywords: check, approve, checkmark

Check solid

Keywords: check, approved, check circle, check solid, correct

Check

Keywords: check, approve, checkmark

Chevron down

Keywords: chevron, chevron down, arrow, down

Chevron left

Keywords: chevron, chevron left, arrow, left

Chevron right

Keywords: chevron, chevron right, arrow, right

Chevron up

Keywords: chevron, chevron up, arrow, up

Clock circle

Keywords: clock circle, clock, clock light, time

Clock solid

Keywords: clock circle, clock, clock solid, time

Close circle

Keywords: close, cancel, close circle

Close single

Keywords: close, cancel, X

Close solid

Keywords: close, cancel, close circle, close solid

Close

Keywords: close, cancel, X

Closed caption solid

Keywords: subtitles, accessibility, video, text

Closed caption

Keywords: subtitles, accessibility, video, text

Cloud solid

Keywords: cloud, cloud solid

Cloud

Keywords: cloud, cloud light

Co browse

Keywords: co browse, dialogue, modal, window

Coffee

Keywords: beverage, cup, hot drink, tea, break

Collaboration

Keywords: connections

Communications

Keywords: communications, radar

Contract

Keywords: agreement, legal, document, signature, terms

Copy to clipboard

Keywords: copy to clipboard, duplicate, pages

Credit card

Keywords: credit card, money, payment, finance

Cube

Keywords: app exchange, cube, module, square, app

Currency

Keywords: money, finance, exchange, symbol, economy

Customer decision hub

Keywords: customer decision hub, CDH, polaris

Customer onboarding

Keywords: customer onboarding, add, personnel, member

Customer service

Keywords: customer service, chat bubbles, communication, chatting

Customer

Keywords: profile, account, avatar, personal, identity

Dashboard

Keywords: layout, structure, grid, stack, layers

Data integrations encrypted

Keywords: security, privacy, encryption, protection, data security

Data integrations

Keywords: data integrations, database, data, server

Decisioning

Keywords: process, automatic, artificial intelligence

Directional down

Keywords: chevron, arrow, solid, down

Directional left

Keywords: chevron, arrow, solid, left

Directional right

Keywords: chevron, arrow, solid, right

Directional up

Keywords: chevron, arrow, solid, up

Documentation

Keywords: book, docs, document, documentation, pages

Dollar circle

Keywords: dollar sign, coin, money, currency, pay

Download cloud

Keywords: download, cloud

Download

Keywords: download

Email

Keywords: mail, letter, communication

Energy

Keywords: energy, lightning bolt, storm, natural disaster

Entertainment

Keywords: entertainment, tv, television, screen, monitor

Exclamation solid

Keywords: alert, warning, emphasis

Exclamation

Keywords: alert, warning, emphasis

External link

Keywords: external link, new window

Eye off solid

Keywords: eye, eye off, eye solid, not visible

Eye off

Keywords: eye, eye off, eye light, not visible

Eye solid

Keywords: eye, eye solid, visible

Eye

Keywords: eye, eye light, visible

Face happy

Keywords: face happy, smile, rating, like

Face sad

Keywords: face sad, frown, rating, dislike

Facebook circle

Keywords: network, communication, platform, logo

Facebook solid

Keywords: network, communication, platform, logo

Facebook

Keywords: network, communication, platform, logo

Farmhouse

Keywords: cottage, home, rural, farmhouse, countryside

Fast delivery

Keywords: express, shipping, quick, rapid, service

Fast

Keywords: speed, quick, rapid, efficient, fast paced

Filter solid

Keywords: filter, filter solid, funnel

Filter

Keywords: filter, filter light, funnel

Financial

Keywords: finances, calculator, counting, banking

Flag solid

Keywords: flag, location, country

Flag

Keywords: flag, location, country

Forward

Keywords: forward, arrow, share

Full screen off

Keywords: contract, full screen off, minimize, shrink

Full screen on

Keywords: expand, full screen, enlarge, maximize

Gavel

Keywords: justice, court, law, judge, decision

Genai analyze

Keywords: product, examine, evaluate, data, insight

Genai automate

Keywords: product, automation, artificial intelligence, control

Genai autopilot

Keywords: product, automation, artificial intelligence, control

Genai blueprint

Keywords: product, blueprint, artificial intelligence, control

Genai cdh

Keywords: product, choice, process, analysis

Genai coach

Keywords: product, coach, artificial intelligence, control

Genai knowledge buddy

Keywords: product, knowledge buddy, buddy, artificial intelligence, control

Genai socrates

Keywords: product, socrates, artificial intelligence, control

Github circle

Keywords: code, repository, development, collaboration, open source

Github solid

Keywords: code, repository, development, collaboration, open source

Github

Keywords: code, repository, development, collaboration, open source

Globe circle

Keywords: world, map, round, empty

Globe

Keywords: globe, earth, planet, language

Government

Keywords: government, capitol, banking, university

Grid

Keywords: grid, 9 grid, nine

Growth

Keywords: progress, development, expansion, increase, success

Health chart

Keywords: medical, wellness, statistics, monitoring

Health

Keywords: pulse, cardio, heartbeat, health, ekg

Healthcare

Keywords: health case, healthcare, health, hospital, health insurance

Heart solid

Keywords: heart, heart solid, like, favorite

Heart

Keywords: heart, heart light, like, favorite

Hospital bed

Keywords: hospitality, bed, sleep, vacation

Hospital

Keywords: healthcare, medical, emergency, clinic, treatement

Hospitality

Keywords: accommodation, sleep, rest, comfort

House

Keywords: home, residence, dwelling, building, living

Ideas

Keywords: ideas, light bulb, think, shine, electricity

Imbalance

Keywords: healthcare, medical, emergency, clinic, unfair, inequality, justice, disbalance, uneven

Industries

Keywords: industry, manufacturing, production, warehouse

Info circle

Keywords: info, information, info circle

Info solid

Keywords: info, information, info circle, info circle solid

Insurance

Keywords: umbrella

Integration

Keywords: integration, app development, add, interface, plus

Intelligent automation

Keywords: ai, automation, efficiency, machine learning, technology

Intelligent virtual assistant

Keywords: intelligent virtual assistant, communications

Interactive

Keywords: interactive, swipe, swipe right, touch, mobile

Java

Keywords: java, low code, no code, html

Key

Keywords: unlock, security, access, password, protection

Knowledgebase

Keywords: knowledgebase, books, library, learn, documentation

Laptop

Keywords: computer, device, technology, portable

Life sciences

Keywords: life sciences, chemistry, DNA

Link

Keywords: link, link light, chain, connect

Linkedin circle

Keywords: professional, networking, career, platform

Linkedin solid

Keywords: professional, networking, career, platform

Linkedin

Keywords: professional, networking, career, platform

List

Keywords: list, checklist, items

Loading

Keywords: progress, wait, processing, buffering, loading bar

Lock solid

Keywords: locked, locked solid, lock

Lock

Keywords: locked, locked light, lock

Manufacturing

Keywords: manufacturing, data, chip, microchip

Map pin solid

Keywords: map pin solid, mark, location, pin

Map pin

Keywords: map pin, mark, location, pin

Media

Keywords: media, book, docs, document, documentation, pages

Menu

Keywords: hamburger, list, lines

Meteor

Keywords: Academy, challenge, comet, meteor

Mining

Keywords: mining

Minus circle

Keywords: minus, minus circle, subtract

Minus single

Keywords: minus, subtract, dash

Minus solid

Keywords: minus, minus circle, minus solid, subtract

Minus

Keywords: minus, subtract, dash

Mobility

Keywords: mobile, mobility, cell phone

Molecule

Keywords: molecules, hive, honeycomb

Money bag

Keywords: wealth, finance, savings, cash, income

Money

Keywords: wealth, finance, savings, cash, income

More vertical

Keywords: options, menu, expand, additional, vertical

More

Keywords: options, menu, expand, additional

Multiple case management

Keywords: file, directory, storage, document

Network solid

Keywords: sort, sort light, ascending

Network

Keywords: network, globe, earth, planet, language

Omni channel

Keywords: omnichannel, circles, RGB, overlap

Orbit

Keywords: module, molecule, orbit, academy

Package

Keywords: package, shipping, box, delivery, cargo

Parent child case

Keywords: file, directory, storage, document

Partners

Keywords: partners, employee, user, persona

Path

Keywords: path, map, location, subway

Pause solid

Keywords: stop, break, delay, control

Pause

Keywords: stop, break, delay, control

Pega announce

Keywords: announce, marketing, megaphone

Pega book

Keywords: book, docs, document, pages

Pega building complex

Keywords: business, corporation, organization, scale, innovation, building, building complex, office

Pega building

Keywords: enterprise, commerce, trade, organization, corporate

Pega cart

Keywords: cart, cart light, shopping, commerce, checkout

Pega catalyst

Keywords: vial

Pega chat double question

Keywords: message, communication, conversation, talk, discussion

Pega chat double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat double

Keywords: chat, circle, double

Pega chat question

Keywords: chat question, question, bubble

Pega chat square double question

Keywords: message, communication, conversation, talk, discussion

Pega chat square double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square double

Keywords: message, communication, conversation, talk, discussion

Pega chat square question

Keywords: message, communication, conversation, talk, discussion

Pega chat square typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square

Keywords: message, communication, conversation, talk, discussion

Pega chat typing

Keywords: chat typing, thinking, bubble

Pega chat

Keywords: sppech, bubble, communication

Pega compass

Keywords: compass, travel, direction

Pega connection hierarchy

Keywords: connection hierarchy, org chart, flow

Pega cosmos

Keywords: planet, moon, solar

Pega database

Keywords: data integrations, database, data, server

Pega disability

Keywords: disability, wheelchair, accessibility, handicap

Pega download pdf

Keywords: download, pdf

Pega handshake

Keywords: handshake, volunteer, hands

Pega health shield

Keywords: health shield, healthcare, health, hospital, health insurance

Pega hub

Keywords: hub, connection hierarchy, org chart, radiate

Pega instructor

Keywords: instructor, ILT, teacher, learning

Pega map

Keywords: map, location, event

Pega mention

Keywords: email, symbol, address, communication

Pega network

Keywords: network, globe, earth, planet, language

Pega patterns

Keywords: patterns, shapes, pathing, flow

Pega people

Keywords: people, org, partners, group, users

Pega phone call

Keywords: phone, phone call, phone light, communication, call

Pega phone ringing

Keywords: call, incoming, communication, alert, ringtone

Pega pie chart

Keywords: pie chart, diagram

Pega pin drop circle

Keywords: location, marker, map, point, attachment

Pega pin drop

Keywords: location, marker, map, point, attachment

Pega pin

Keywords: pin, pushpin, marker, map, location

Pega plane

Keywords: plane, travel, global

Pega process ai

Keywords: ai, machine learning, technology, automation, innovation

Pega process fabric

Keywords: air, wind, waves, flow

Pega process mining

Keywords: mining, process mining, data mining, pick axe

Pega send submit

Keywords: paper airplane, flight, paper airplane, email, transfer, submit, share, deliver, forward

Pega setting

Keywords: settings, gear, settings light

Pega shuffle

Keywords: shuffle, double arrow

Pega subtitle

Keywords: caption, text, video, translation

Pega subtitles solid

Keywords: caption, text, video, translation

Pega tag

Keywords: tag, sales, retail, price

Pega thumbs up

Keywords: thumbs up, like, rate, rating

Pega timer

Keywords: timer, stop watch, speed

Pega wifi

Keywords: wifi, wifi light, signal

Pencil solid

Keywords: pencil solid, pencil, edit

Pencil

Keywords: pencil outline, pencil, edit

Personal chart

Keywords: notes, data, statistics

Personalized

Keywords: custom, tailored, unique, individual, profile

Phone call solid

Keywords: phone, phone call, phone solid, communication, call

Phone call

Keywords: phone, phone call, phone light, communication, call

Picture

Keywords: picture, placeholder

Platform

Keywords: platform, layered cake, layers

Play solid

Keywords: start, media, video, audio

Play

Keywords: start, media, video, audio

Podcast solid

Keywords: podcast, microphone, mic, podcast solid, speech, talk

Podcast

Keywords: podcast, microphone, mic, podcast light, speech, talk

Prembridge

Keywords: prembridge, cloud, connect, link

Presentation

Keywords: presentation, chart, diagram

Print

Keywords: printer, print

Product delivery

Keywords: app, product delivery, upload

Refresh

Keywords: refresh, reload, arrows

Reload

Keywords: refresh, update, restart, loop, reset

Reply

Keywords: response, message, communication, reply arrow

Reporting

Keywords: reporting, graph, chart, data

Retail

Keywords: shirt, collar, business

Ribbon

Keywords: ribbon, certificate, award, medal

Robo auto

Keywords: robotic automation, robot, genai, assistant

Rocket

Keywords: Academy, rocket, ship, space, travel

Sales automation

Keywords: sales automation, funnel, filter

Scalability

Keywords: crop, scale, responsive, adaptable, adjustable

Search

Keywords: search, search light, magnify

Setting solid

Keywords: settings, gear, settings solid

Share solid

Keywords: share, share solid

Share

Keywords: share, share light

Small business

Keywords: entrepreneur, startup, local, commerce, ownership

Sort descending

Keywords: sort, sort light, descending

Sort

Keywords: sort, sort light, ascending

Speed dial

Keywords: speedometer, acceleration, speed dial

Star solid

Keywords: rating, favourite, achievement

Star

Keywords: rating, favourite, achievement

Support

Keywords: support, life saver, rescue

System admin

Keywords: system admin, license, employee, user ID

Target

Keywords: goal, aim, focus, objective, precision

Text align center

Keywords: alignment, text, format, layout

Text align left

Keywords: alignment, text, format, layout

Text align right

Keywords: alignment, text, format, layout

Tools

Keywords: equipment, repair, maintenance, instruments, work

Transportation

Keywords: transportation, bus, travel, commute

Trash solid

Keywords: trash, trash solid, delete

Trash

Keywords: trash, trash light, delete

Triangle

Keywords: Academy, excercise, layers, multi layer, diagram

Trophy

Keywords: award, achievement, victory, success, recognition

Truck

Keywords: vehicle, delivery, transport, cargo, logistics

Twitter solid

Keywords: social media

Twitter

Keywords: social media

Unlock solid

Keywords: unlock, unlock solid, lock, open

Unlock

Keywords: unlock, unlock light, lock, open

Upload cloud

Keywords: transfer, file, cloud, arrow, data

Upload

Keywords: transfer, file, cloud, data, arrow

User interface

Keywords: user interface, UI, layout, wireframe

User solid

Keywords: user, user solid, profile, account

User

Keywords: user, user light, profile, account

Video solid

Keywords: video, video solid, camera

Video

Keywords: video, video light, camera

Warning solid

Keywords: info, information, info triangle, info triangle solid, warning

Warning

Keywords: info, information, info triangle, warning

Watch

Keywords: watch, time

Workflow

Keywords: arrow, direction, work flow, pointer, forward

Workforce intelligence

Keywords: workforce intelligence, search

X circle

Keywords: communication, platform, microblogging, networking

X solid

Keywords: communication, platform, microblogging, networking

X

Keywords: communication, platform, microblogging, networking

Youtube circle

Keywords: video, streaming, media, platform, entertainment

Youtube solid

Keywords: video, streaming, media, platform, entertainment

Youtube

Keywords: video, streaming, media, platform, entertainment

Brand Icons

Agile

Keywords: agile, arrow

Agile2

Keywords: scrum, workflow, iteration, project, collaboration

Agriculture

Keywords: agriculture, crops, harvest, silo, field

Ambulance

Keywords: emergency, medical, healthcare, rescue, first aid

App code

Keywords: app development, add, interface, code

App development

Keywords: app development, add, interface, plus

App search

Keywords: app development, add, interface, search

Balance

Keywords: justice, equality, law, balance, fairness

Bar chart

Keywords: bar chart, diagram, chart, results

Bicycle

Keywords: bike, transportation, cycling, ride, outdoor

Bold chevron double

Keywords: arrow, direction, work flow, pointer, forward

Bold chevron

Keywords: arrow, direction, work flow, pointer, forward

Bolt logo colored

Keywords: design system

Box open

Keywords: package, delivery, container, unbox, storage

Briefcase

Keywords: briefcase, case, case type

Bullseye

Keywords: Academy, go to market, marketing, sales, direct, bullseye, arrow

Car

Keywords: vehicle, transportation, drive, automobile, road

Case management

Keywords: file, directory, storage, document

Cell tower

Keywords: communication, signal, broadcast, network, telecommunication

Center out

Keywords: expand, focus, radiate, distribute, outward

Certification

Keywords: certification, award, badge, approved, academy

Co browse

Keywords: co browse, dialogue, modal, window

Coffee

Keywords: beverage, cup, hot drink, tea, break

Collaboration

Keywords: connections

Communications

Keywords: communications, radar

Contract

Keywords: agreement, legal, document, signature, terms

Credit card

Keywords: credit card, money, payment, finance

Cube

Keywords: app exchange, cube, module, square, app

Currency

Keywords: money, finance, exchange, symbol, economy

Customer decision hub

Keywords: customer decision hub, CDH, polaris

Customer onboarding

Keywords: customer onboarding, add, personnel, member

Customer service

Keywords: customer service, chat bubbles, communication, chatting

Customer

Keywords: profile, account, avatar, personal, identity

Dashboard

Keywords: layout, structure, grid, stack, layers

Data integrations encrypted

Keywords: security, privacy, encryption, protection, data security

Data integrations

Keywords: data integrations, database, data, server

Decisioning

Keywords: process, automatic, artificial intelligence

Documentation

Keywords: book, docs, document, documentation, pages

Dollar circle

Keywords: dollar sign, coin, money, currency, pay

Email

Keywords: mail, letter, communication

Energy

Keywords: energy, lightning bolt, storm, natural disaster

Entertainment

Keywords: entertainment, tv, television, screen, monitor

Face happy

Keywords: face happy, smile, rating, like

Face sad

Keywords: face sad, frown, rating, dislike

Farmhouse

Keywords: cottage, home, rural, farmhouse, countryside

Fast delivery

Keywords: express, shipping, quick, rapid, service

Fast

Keywords: speed, quick, rapid, efficient, fast paced

Financial

Keywords: finances, calculator, counting, banking

Gavel

Keywords: justice, court, law, judge, decision

Genai analyze

Keywords: product, examine, evaluate, data, insight

Genai automate

Keywords: product, automation, artificial intelligence, control

Genai autopilot

Keywords: product, automation, artificial intelligence, control

Genai blueprint

Keywords: product, blueprint, artificial intelligence, control

Genai cdh

Keywords: product, choice, process, analysis

Genai coach

Keywords: product, coach, artificial intelligence, control

Genai knowledge buddy

Keywords: product, knowledge buddy, buddy, artificial intelligence, control

Genai socrates

Keywords: product, socrates, artificial intelligence, control

Government

Keywords: government, capitol, banking, university

Growth

Keywords: progress, development, expansion, increase, success

Health chart

Keywords: medical, wellness, statistics, monitoring

Health

Keywords: pulse, cardio, heartbeat, health, ekg

Healthcare

Keywords: health case, healthcare, health, hospital, health insurance

Hospital bed

Keywords: hospitality, bed, sleep, vacation

Hospital

Keywords: healthcare, medical, emergency, clinic, treatement

Hospitality

Keywords: accommodation, sleep, rest, comfort

House

Keywords: home, residence, dwelling, building, living

Ideas

Keywords: ideas, light bulb, think, shine, electricity

Imbalance

Keywords: healthcare, medical, emergency, clinic, unfair, inequality, justice, disbalance, uneven

Industries

Keywords: industry, manufacturing, production, warehouse

Insurance

Keywords: umbrella

Integration

Keywords: integration, app development, add, interface, plus

Intelligent automation

Keywords: ai, automation, efficiency, machine learning, technology

Intelligent virtual assistant

Keywords: intelligent virtual assistant, communications

Java

Keywords: java, low code, no code, html

Key

Keywords: unlock, security, access, password, protection

Knowledgebase

Keywords: knowledgebase, books, library, learn, documentation

Laptop

Keywords: computer, device, technology, portable

Life sciences

Keywords: life sciences, chemistry, DNA

List

Keywords: list, checklist, items

Loading

Keywords: progress, wait, processing, buffering, loading bar

Manufacturing

Keywords: manufacturing, data, chip, microchip

Media

Keywords: media, book, docs, document, documentation, pages

Meteor

Keywords: Academy, challenge, comet, meteor

Mining

Keywords: mining

Mobility

Keywords: mobile, mobility, cell phone

Molecule

Keywords: molecules, hive, honeycomb

Money bag

Keywords: wealth, finance, savings, cash, income

Money

Keywords: wealth, finance, savings, cash, income

Multiple case management

Keywords: file, directory, storage, document

Omni channel

Keywords: omnichannel, circles, RGB, overlap

Orbit

Keywords: module, molecule, orbit, academy

Package

Keywords: package, shipping, box, delivery, cargo

Parent child case

Keywords: file, directory, storage, document

Partners

Keywords: partners, employee, user, persona

Path

Keywords: path, map, location, subway

Pega announce

Keywords: announce, marketing, megaphone

Pega book

Keywords: book, docs, document, pages

Pega building complex

Keywords: business, corporation, organization, scale, innovation, building, building complex, office

Pega building

Keywords: enterprise, commerce, trade, organization, corporate

Pega catalyst

Keywords: vial

Pega chat double question

Keywords: message, communication, conversation, talk, discussion

Pega chat double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat double

Keywords: chat, circle, double

Pega chat question

Keywords: chat question, question, bubble

Pega chat square double question

Keywords: message, communication, conversation, talk, discussion

Pega chat square double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square double

Keywords: message, communication, conversation, talk, discussion

Pega chat square question

Keywords: message, communication, conversation, talk, discussion

Pega chat square typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square

Keywords: message, communication, conversation, talk, discussion

Pega chat typing

Keywords: chat typing, thinking, bubble

Pega chat

Keywords: sppech, bubble, communication

Pega compass

Keywords: compass, travel, direction

Pega connection hierarchy

Keywords: connection hierarchy, org chart, flow

Pega cosmos

Keywords: planet, moon, solar

Pega database

Keywords: data integrations, database, data, server

Pega disability

Keywords: disability, wheelchair, accessibility, handicap

Pega handshake

Keywords: handshake, volunteer, hands

Pega health shield

Keywords: health shield, healthcare, health, hospital, health insurance

Pega hub

Keywords: hub, connection hierarchy, org chart, radiate

Pega instructor

Keywords: instructor, ILT, teacher, learning

Pega map

Keywords: map, location, event

Pega network

Keywords: network, globe, earth, planet, language

Pega patterns

Keywords: patterns, shapes, pathing, flow

Pega people

Keywords: people, org, partners, group, users

Pega phone call

Keywords: phone, phone call, phone light, communication, call

Pega phone ringing

Keywords: call, incoming, communication, alert, ringtone

Pega pie chart

Keywords: pie chart, diagram

Pega pin drop circle

Keywords: location, marker, map, point, attachment

Pega pin drop

Keywords: location, marker, map, point, attachment

Pega pin

Keywords: pin, pushpin, marker, map, location

Pega plane

Keywords: plane, travel, global

Pega process ai

Keywords: ai, machine learning, technology, automation, innovation

Pega process fabric

Keywords: air, wind, waves, flow

Pega process mining

Keywords: mining, process mining, data mining, pick axe

Pega send submit

Keywords: paper airplane, flight, paper airplane, email, transfer, submit, share, deliver, forward

Pega tag

Keywords: tag, sales, retail, price

Pega thumbs up

Keywords: thumbs up, like, rate, rating

Pega timer

Keywords: timer, stop watch, speed

Personal chart

Keywords: notes, data, statistics

Personalized

Keywords: custom, tailored, unique, individual, profile

Picture

Keywords: picture, placeholder

Platform

Keywords: platform, layered cake, layers

Prembridge

Keywords: prembridge, cloud, connect, link

Presentation

Keywords: presentation, chart, diagram

Print

Keywords: printer, print

Product delivery

Keywords: app, product delivery, upload

Reporting

Keywords: reporting, graph, chart, data

Retail

Keywords: shirt, collar, business

Ribbon

Keywords: ribbon, certificate, award, medal

Robo auto

Keywords: robotic automation, robot, genai, assistant

Rocket

Keywords: Academy, rocket, ship, space, travel

Sales automation

Keywords: sales automation, funnel, filter

Scalability

Keywords: crop, scale, responsive, adaptable, adjustable

Small business

Keywords: entrepreneur, startup, local, commerce, ownership

Speed dial

Keywords: speedometer, acceleration, speed dial

Support

Keywords: support, life saver, rescue

System admin

Keywords: system admin, license, employee, user ID

Target

Keywords: goal, aim, focus, objective, precision

Tools

Keywords: equipment, repair, maintenance, instruments, work

Transportation

Keywords: transportation, bus, travel, commute

Triangle

Keywords: Academy, excercise, layers, multi layer, diagram

Trophy

Keywords: award, achievement, victory, success, recognition

Truck

Keywords: vehicle, delivery, transport, cargo, logistics

User interface

Keywords: user interface, UI, layout, wireframe

Watch

Keywords: watch, time

Workflow

Keywords: arrow, direction, work flow, pointer, forward

Workforce intelligence

Keywords: workforce intelligence, search

UI Icons

Add circle

Keywords: plus, add, add circle, outline

Add single

Keywords: plus, add

Add solid

Keywords: plus, solid plus, add

Add

Keywords: plus, add

Arrow down

Keywords: arrow, arrow down, down

Arrow left

Keywords: arrow, arrow left, left

Arrow right

Keywords: arrow, arrow right, right

Arrow up

Keywords: arrow, arrow up, up

Bar chart circle

Keywords: round, data

Bar chart growth

Keywords: data, graph, analysis, statistics, comparison

Bell solid

Keywords: bell, bell solid

Bell

Keywords: bell, bell light

Calendar solid

Keywords: calendar, calendar solid, event, date

Calendar

Keywords: calendar, calendar light, event, date

Cart solid

Keywords: cart, cart solid, shopping, commerce, checkout

Check circle

Keywords: check, approved, check circle, correct

Check single

Keywords: check, approve, checkmark

Check solid

Keywords: check, approved, check circle, check solid, correct

Check

Keywords: check, approve, checkmark

Chevron down

Keywords: chevron, chevron down, arrow, down

Chevron left

Keywords: chevron, chevron left, arrow, left

Chevron right

Keywords: chevron, chevron right, arrow, right

Chevron up

Keywords: chevron, chevron up, arrow, up

Clock circle

Keywords: clock circle, clock, clock light, time

Clock solid

Keywords: clock circle, clock, clock solid, time

Close circle

Keywords: close, cancel, close circle

Close single

Keywords: close, cancel, X

Close solid

Keywords: close, cancel, close circle, close solid

Close

Keywords: close, cancel, X

Closed caption solid

Keywords: subtitles, accessibility, video, text

Closed caption

Keywords: subtitles, accessibility, video, text

Cloud solid

Keywords: cloud, cloud solid

Cloud

Keywords: cloud, cloud light

Copy to clipboard

Keywords: copy to clipboard, duplicate, pages

Directional down

Keywords: chevron, arrow, solid, down

Directional left

Keywords: chevron, arrow, solid, left

Directional right

Keywords: chevron, arrow, solid, right

Directional up

Keywords: chevron, arrow, solid, up

Download cloud

Keywords: download, cloud

Download

Keywords: download

Exclamation solid

Keywords: alert, warning, emphasis

Exclamation

Keywords: alert, warning, emphasis

External link

Keywords: external link, new window

Eye off solid

Keywords: eye, eye off, eye solid, not visible

Eye off

Keywords: eye, eye off, eye light, not visible

Eye solid

Keywords: eye, eye solid, visible

Eye

Keywords: eye, eye light, visible

Filter solid

Keywords: filter, filter solid, funnel

Filter

Keywords: filter, filter light, funnel

Flag solid

Keywords: flag, location, country

Flag

Keywords: flag, location, country

Forward

Keywords: forward, arrow, share

Full screen off

Keywords: contract, full screen off, minimize, shrink

Full screen on

Keywords: expand, full screen, enlarge, maximize

Globe circle

Keywords: world, map, round, empty

Globe

Keywords: globe, earth, planet, language

Grid

Keywords: grid, 9 grid, nine

Heart solid

Keywords: heart, heart solid, like, favorite

Heart

Keywords: heart, heart light, like, favorite

Info circle

Keywords: info, information, info circle

Info solid

Keywords: info, information, info circle, info circle solid

Interactive

Keywords: interactive, swipe, swipe right, touch, mobile

Link

Keywords: link, link light, chain, connect

Lock solid

Keywords: locked, locked solid, lock

Lock

Keywords: locked, locked light, lock

Map pin solid

Keywords: map pin solid, mark, location, pin

Map pin

Keywords: map pin, mark, location, pin

Menu

Keywords: hamburger, list, lines

Minus circle

Keywords: minus, minus circle, subtract

Minus single

Keywords: minus, subtract, dash

Minus solid

Keywords: minus, minus circle, minus solid, subtract

Minus

Keywords: minus, subtract, dash

More vertical

Keywords: options, menu, expand, additional, vertical

More

Keywords: options, menu, expand, additional

Network solid

Keywords: sort, sort light, ascending

Network

Keywords: network, globe, earth, planet, language

Pause solid

Keywords: stop, break, delay, control

Pause

Keywords: stop, break, delay, control

Pega cart

Keywords: cart, cart light, shopping, commerce, checkout

Pega download pdf

Keywords: download, pdf

Pega mention

Keywords: email, symbol, address, communication

Pega setting

Keywords: settings, gear, settings light

Pega shuffle

Keywords: shuffle, double arrow

Pega subtitle

Keywords: caption, text, video, translation

Pega subtitles solid

Keywords: caption, text, video, translation

Pega wifi

Keywords: wifi, wifi light, signal

Pencil solid

Keywords: pencil solid, pencil, edit

Pencil

Keywords: pencil outline, pencil, edit

Phone call solid

Keywords: phone, phone call, phone solid, communication, call

Phone call

Keywords: phone, phone call, phone light, communication, call

Play solid

Keywords: start, media, video, audio

Play

Keywords: start, media, video, audio

Podcast solid

Keywords: podcast, microphone, mic, podcast solid, speech, talk

Podcast

Keywords: podcast, microphone, mic, podcast light, speech, talk

Refresh

Keywords: refresh, reload, arrows

Reload

Keywords: refresh, update, restart, loop, reset

Reply

Keywords: response, message, communication, reply arrow

Search

Keywords: search, search light, magnify

Setting solid

Keywords: settings, gear, settings solid

Share solid

Keywords: share, share solid

Share

Keywords: share, share light

Sort descending

Keywords: sort, sort light, descending

Sort

Keywords: sort, sort light, ascending

Star solid

Keywords: rating, favourite, achievement

Star

Keywords: rating, favourite, achievement

Text align center

Keywords: alignment, text, format, layout

Text align left

Keywords: alignment, text, format, layout

Text align right

Keywords: alignment, text, format, layout

Trash solid

Keywords: trash, trash solid, delete

Trash

Keywords: trash, trash light, delete

Unlock solid

Keywords: unlock, unlock solid, lock, open

Unlock

Keywords: unlock, unlock light, lock, open

Upload cloud

Keywords: transfer, file, cloud, arrow, data

Upload

Keywords: transfer, file, cloud, data, arrow

User solid

Keywords: user, user solid, profile, account

User

Keywords: user, user light, profile, account

Video solid

Keywords: video, video solid, camera

Video

Keywords: video, video light, camera

Warning solid

Keywords: info, information, info triangle, info triangle solid, warning

Warning

Keywords: info, information, info triangle, warning

Social Icons

Facebook circle

Keywords: network, communication, platform, logo

Facebook solid

Keywords: network, communication, platform, logo

Facebook

Keywords: network, communication, platform, logo

Github circle

Keywords: code, repository, development, collaboration, open source

Github solid

Keywords: code, repository, development, collaboration, open source

Github

Keywords: code, repository, development, collaboration, open source

Linkedin circle

Keywords: professional, networking, career, platform

Linkedin solid

Keywords: professional, networking, career, platform

Linkedin

Keywords: professional, networking, career, platform

Twitter solid

Keywords: social media

Twitter

Keywords: social media

X circle

Keywords: communication, platform, microblogging, networking

X solid

Keywords: communication, platform, microblogging, networking

X

Keywords: communication, platform, microblogging, networking

Youtube circle

Keywords: video, streaming, media, platform, entertainment

Youtube solid

Keywords: video, streaming, media, platform, entertainment

Youtube

Keywords: video, streaming, media, platform, entertainment

Dark Theme All Icons

Add circle

Keywords: plus, add, add circle, outline

Add single

Keywords: plus, add

Add solid

Keywords: plus, solid plus, add

Add

Keywords: plus, add

Agile

Keywords: agile, arrow

Agile2

Keywords: scrum, workflow, iteration, project, collaboration

Agriculture

Keywords: agriculture, crops, harvest, silo, field

Ambulance

Keywords: emergency, medical, healthcare, rescue, first aid

App code

Keywords: app development, add, interface, code

App development

Keywords: app development, add, interface, plus

App search

Keywords: app development, add, interface, search

Arrow down

Keywords: arrow, arrow down, down

Arrow left

Keywords: arrow, arrow left, left

Arrow right

Keywords: arrow, arrow right, right

Arrow up

Keywords: arrow, arrow up, up

Balance

Keywords: justice, equality, law, balance, fairness

Bar chart circle

Keywords: round, data

Bar chart growth

Keywords: data, graph, analysis, statistics, comparison

Bar chart

Keywords: bar chart, diagram, chart, results

Bell solid

Keywords: bell, bell solid

Bell

Keywords: bell, bell light

Bicycle

Keywords: bike, transportation, cycling, ride, outdoor

Bold chevron double

Keywords: arrow, direction, work flow, pointer, forward

Bold chevron

Keywords: arrow, direction, work flow, pointer, forward

Bolt logo colored

Keywords: design system

Box open

Keywords: package, delivery, container, unbox, storage

Briefcase

Keywords: briefcase, case, case type

Bullseye

Keywords: Academy, go to market, marketing, sales, direct, bullseye, arrow

Calendar solid

Keywords: calendar, calendar solid, event, date

Calendar

Keywords: calendar, calendar light, event, date

Car

Keywords: vehicle, transportation, drive, automobile, road

Cart solid

Keywords: cart, cart solid, shopping, commerce, checkout

Case management

Keywords: file, directory, storage, document

Cell tower

Keywords: communication, signal, broadcast, network, telecommunication

Center out

Keywords: expand, focus, radiate, distribute, outward

Certification

Keywords: certification, award, badge, approved, academy

Check circle

Keywords: check, approved, check circle, correct

Check single

Keywords: check, approve, checkmark

Check solid

Keywords: check, approved, check circle, check solid, correct

Check

Keywords: check, approve, checkmark

Chevron down

Keywords: chevron, chevron down, arrow, down

Chevron left

Keywords: chevron, chevron left, arrow, left

Chevron right

Keywords: chevron, chevron right, arrow, right

Chevron up

Keywords: chevron, chevron up, arrow, up

Clock circle

Keywords: clock circle, clock, clock light, time

Clock solid

Keywords: clock circle, clock, clock solid, time

Close circle

Keywords: close, cancel, close circle

Close single

Keywords: close, cancel, X

Close solid

Keywords: close, cancel, close circle, close solid

Close

Keywords: close, cancel, X

Closed caption solid

Keywords: subtitles, accessibility, video, text

Closed caption

Keywords: subtitles, accessibility, video, text

Cloud solid

Keywords: cloud, cloud solid

Cloud

Keywords: cloud, cloud light

Co browse

Keywords: co browse, dialogue, modal, window

Coffee

Keywords: beverage, cup, hot drink, tea, break

Collaboration

Keywords: connections

Communications

Keywords: communications, radar

Contract

Keywords: agreement, legal, document, signature, terms

Copy to clipboard

Keywords: copy to clipboard, duplicate, pages

Credit card

Keywords: credit card, money, payment, finance

Cube

Keywords: app exchange, cube, module, square, app

Currency

Keywords: money, finance, exchange, symbol, economy

Customer decision hub

Keywords: customer decision hub, CDH, polaris

Customer onboarding

Keywords: customer onboarding, add, personnel, member

Customer service

Keywords: customer service, chat bubbles, communication, chatting

Customer

Keywords: profile, account, avatar, personal, identity

Dashboard

Keywords: layout, structure, grid, stack, layers

Data integrations encrypted

Keywords: security, privacy, encryption, protection, data security

Data integrations

Keywords: data integrations, database, data, server

Decisioning

Keywords: process, automatic, artificial intelligence

Directional down

Keywords: chevron, arrow, solid, down

Directional left

Keywords: chevron, arrow, solid, left

Directional right

Keywords: chevron, arrow, solid, right

Directional up

Keywords: chevron, arrow, solid, up

Documentation

Keywords: book, docs, document, documentation, pages

Dollar circle

Keywords: dollar sign, coin, money, currency, pay

Download cloud

Keywords: download, cloud

Download

Keywords: download

Email

Keywords: mail, letter, communication

Energy

Keywords: energy, lightning bolt, storm, natural disaster

Entertainment

Keywords: entertainment, tv, television, screen, monitor

Exclamation solid

Keywords: alert, warning, emphasis

Exclamation

Keywords: alert, warning, emphasis

External link

Keywords: external link, new window

Eye off solid

Keywords: eye, eye off, eye solid, not visible

Eye off

Keywords: eye, eye off, eye light, not visible

Eye solid

Keywords: eye, eye solid, visible

Eye

Keywords: eye, eye light, visible

Face happy

Keywords: face happy, smile, rating, like

Face sad

Keywords: face sad, frown, rating, dislike

Facebook circle

Keywords: network, communication, platform, logo

Facebook solid

Keywords: network, communication, platform, logo

Facebook

Keywords: network, communication, platform, logo

Farmhouse

Keywords: cottage, home, rural, farmhouse, countryside

Fast delivery

Keywords: express, shipping, quick, rapid, service

Fast

Keywords: speed, quick, rapid, efficient, fast paced

Filter solid

Keywords: filter, filter solid, funnel

Filter

Keywords: filter, filter light, funnel

Financial

Keywords: finances, calculator, counting, banking

Flag solid

Keywords: flag, location, country

Flag

Keywords: flag, location, country

Forward

Keywords: forward, arrow, share

Full screen off

Keywords: contract, full screen off, minimize, shrink

Full screen on

Keywords: expand, full screen, enlarge, maximize

Gavel

Keywords: justice, court, law, judge, decision

Genai analyze

Keywords: product, examine, evaluate, data, insight

Genai automate

Keywords: product, automation, artificial intelligence, control

Genai autopilot

Keywords: product, automation, artificial intelligence, control

Genai blueprint

Keywords: product, blueprint, artificial intelligence, control

Genai cdh

Keywords: product, choice, process, analysis

Genai coach

Keywords: product, coach, artificial intelligence, control

Genai knowledge buddy

Keywords: product, knowledge buddy, buddy, artificial intelligence, control

Genai socrates

Keywords: product, socrates, artificial intelligence, control

Github circle

Keywords: code, repository, development, collaboration, open source

Github solid

Keywords: code, repository, development, collaboration, open source

Github

Keywords: code, repository, development, collaboration, open source

Globe circle

Keywords: world, map, round, empty

Globe

Keywords: globe, earth, planet, language

Government

Keywords: government, capitol, banking, university

Grid

Keywords: grid, 9 grid, nine

Growth

Keywords: progress, development, expansion, increase, success

Health chart

Keywords: medical, wellness, statistics, monitoring

Health

Keywords: pulse, cardio, heartbeat, health, ekg

Healthcare

Keywords: health case, healthcare, health, hospital, health insurance

Heart solid

Keywords: heart, heart solid, like, favorite

Heart

Keywords: heart, heart light, like, favorite

Hospital bed

Keywords: hospitality, bed, sleep, vacation

Hospital

Keywords: healthcare, medical, emergency, clinic, treatement

Hospitality

Keywords: accommodation, sleep, rest, comfort

House

Keywords: home, residence, dwelling, building, living

Ideas

Keywords: ideas, light bulb, think, shine, electricity

Imbalance

Keywords: healthcare, medical, emergency, clinic, unfair, inequality, justice, disbalance, uneven

Industries

Keywords: industry, manufacturing, production, warehouse

Info circle

Keywords: info, information, info circle

Info solid

Keywords: info, information, info circle, info circle solid

Insurance

Keywords: umbrella

Integration

Keywords: integration, app development, add, interface, plus

Intelligent automation

Keywords: ai, automation, efficiency, machine learning, technology

Intelligent virtual assistant

Keywords: intelligent virtual assistant, communications

Interactive

Keywords: interactive, swipe, swipe right, touch, mobile

Java

Keywords: java, low code, no code, html

Key

Keywords: unlock, security, access, password, protection

Knowledgebase

Keywords: knowledgebase, books, library, learn, documentation

Laptop

Keywords: computer, device, technology, portable

Life sciences

Keywords: life sciences, chemistry, DNA

Link

Keywords: link, link light, chain, connect

Linkedin circle

Keywords: professional, networking, career, platform

Linkedin solid

Keywords: professional, networking, career, platform

Linkedin

Keywords: professional, networking, career, platform

List

Keywords: list, checklist, items

Loading

Keywords: progress, wait, processing, buffering, loading bar

Lock solid

Keywords: locked, locked solid, lock

Lock

Keywords: locked, locked light, lock

Manufacturing

Keywords: manufacturing, data, chip, microchip

Map pin solid

Keywords: map pin solid, mark, location, pin

Map pin

Keywords: map pin, mark, location, pin

Media

Keywords: media, book, docs, document, documentation, pages

Menu

Keywords: hamburger, list, lines

Meteor

Keywords: Academy, challenge, comet, meteor

Mining

Keywords: mining

Minus circle

Keywords: minus, minus circle, subtract

Minus single

Keywords: minus, subtract, dash

Minus solid

Keywords: minus, minus circle, minus solid, subtract

Minus

Keywords: minus, subtract, dash

Mobility

Keywords: mobile, mobility, cell phone

Molecule

Keywords: molecules, hive, honeycomb

Money bag

Keywords: wealth, finance, savings, cash, income

Money

Keywords: wealth, finance, savings, cash, income

More vertical

Keywords: options, menu, expand, additional, vertical

More

Keywords: options, menu, expand, additional

Multiple case management

Keywords: file, directory, storage, document

Network solid

Keywords: sort, sort light, ascending

Network

Keywords: network, globe, earth, planet, language

Omni channel

Keywords: omnichannel, circles, RGB, overlap

Orbit

Keywords: module, molecule, orbit, academy

Package

Keywords: package, shipping, box, delivery, cargo

Parent child case

Keywords: file, directory, storage, document

Partners

Keywords: partners, employee, user, persona

Path

Keywords: path, map, location, subway

Pause solid

Keywords: stop, break, delay, control

Pause

Keywords: stop, break, delay, control

Pega announce

Keywords: announce, marketing, megaphone

Pega book

Keywords: book, docs, document, pages

Pega building complex

Keywords: business, corporation, organization, scale, innovation, building, building complex, office

Pega building

Keywords: enterprise, commerce, trade, organization, corporate

Pega cart

Keywords: cart, cart light, shopping, commerce, checkout

Pega catalyst

Keywords: vial

Pega chat double question

Keywords: message, communication, conversation, talk, discussion

Pega chat double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat double

Keywords: chat, circle, double

Pega chat question

Keywords: chat question, question, bubble

Pega chat square double question

Keywords: message, communication, conversation, talk, discussion

Pega chat square double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square double

Keywords: message, communication, conversation, talk, discussion

Pega chat square question

Keywords: message, communication, conversation, talk, discussion

Pega chat square typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square

Keywords: message, communication, conversation, talk, discussion

Pega chat typing

Keywords: chat typing, thinking, bubble

Pega chat

Keywords: sppech, bubble, communication

Pega compass

Keywords: compass, travel, direction

Pega connection hierarchy

Keywords: connection hierarchy, org chart, flow

Pega cosmos

Keywords: planet, moon, solar

Pega database

Keywords: data integrations, database, data, server

Pega disability

Keywords: disability, wheelchair, accessibility, handicap

Pega download pdf

Keywords: download, pdf

Pega handshake

Keywords: handshake, volunteer, hands

Pega health shield

Keywords: health shield, healthcare, health, hospital, health insurance

Pega hub

Keywords: hub, connection hierarchy, org chart, radiate

Pega instructor

Keywords: instructor, ILT, teacher, learning

Pega map

Keywords: map, location, event

Pega mention

Keywords: email, symbol, address, communication

Pega network

Keywords: network, globe, earth, planet, language

Pega patterns

Keywords: patterns, shapes, pathing, flow

Pega people

Keywords: people, org, partners, group, users

Pega phone call

Keywords: phone, phone call, phone light, communication, call

Pega phone ringing

Keywords: call, incoming, communication, alert, ringtone

Pega pie chart

Keywords: pie chart, diagram

Pega pin drop circle

Keywords: location, marker, map, point, attachment

Pega pin drop

Keywords: location, marker, map, point, attachment

Pega pin

Keywords: pin, pushpin, marker, map, location

Pega plane

Keywords: plane, travel, global

Pega process ai

Keywords: ai, machine learning, technology, automation, innovation

Pega process fabric

Keywords: air, wind, waves, flow

Pega process mining

Keywords: mining, process mining, data mining, pick axe

Pega send submit

Keywords: paper airplane, flight, paper airplane, email, transfer, submit, share, deliver, forward

Pega setting

Keywords: settings, gear, settings light

Pega shuffle

Keywords: shuffle, double arrow

Pega subtitle

Keywords: caption, text, video, translation

Pega subtitles solid

Keywords: caption, text, video, translation

Pega tag

Keywords: tag, sales, retail, price

Pega thumbs up

Keywords: thumbs up, like, rate, rating

Pega timer

Keywords: timer, stop watch, speed

Pega wifi

Keywords: wifi, wifi light, signal

Pencil solid

Keywords: pencil solid, pencil, edit

Pencil

Keywords: pencil outline, pencil, edit

Personal chart

Keywords: notes, data, statistics

Personalized

Keywords: custom, tailored, unique, individual, profile

Phone call solid

Keywords: phone, phone call, phone solid, communication, call

Phone call

Keywords: phone, phone call, phone light, communication, call

Picture

Keywords: picture, placeholder

Platform

Keywords: platform, layered cake, layers

Play solid

Keywords: start, media, video, audio

Play

Keywords: start, media, video, audio

Podcast solid

Keywords: podcast, microphone, mic, podcast solid, speech, talk

Podcast

Keywords: podcast, microphone, mic, podcast light, speech, talk

Prembridge

Keywords: prembridge, cloud, connect, link

Presentation

Keywords: presentation, chart, diagram

Print

Keywords: printer, print

Product delivery

Keywords: app, product delivery, upload

Refresh

Keywords: refresh, reload, arrows

Reload

Keywords: refresh, update, restart, loop, reset

Reply

Keywords: response, message, communication, reply arrow

Reporting

Keywords: reporting, graph, chart, data

Retail

Keywords: shirt, collar, business

Ribbon

Keywords: ribbon, certificate, award, medal

Robo auto

Keywords: robotic automation, robot, genai, assistant

Rocket

Keywords: Academy, rocket, ship, space, travel

Sales automation

Keywords: sales automation, funnel, filter

Scalability

Keywords: crop, scale, responsive, adaptable, adjustable

Search

Keywords: search, search light, magnify

Setting solid

Keywords: settings, gear, settings solid

Share solid

Keywords: share, share solid

Share

Keywords: share, share light

Small business

Keywords: entrepreneur, startup, local, commerce, ownership

Sort descending

Keywords: sort, sort light, descending

Sort

Keywords: sort, sort light, ascending

Speed dial

Keywords: speedometer, acceleration, speed dial

Star solid

Keywords: rating, favourite, achievement

Star

Keywords: rating, favourite, achievement

Support

Keywords: support, life saver, rescue

System admin

Keywords: system admin, license, employee, user ID

Target

Keywords: goal, aim, focus, objective, precision

Text align center

Keywords: alignment, text, format, layout

Text align left

Keywords: alignment, text, format, layout

Text align right

Keywords: alignment, text, format, layout

Tools

Keywords: equipment, repair, maintenance, instruments, work

Transportation

Keywords: transportation, bus, travel, commute

Trash solid

Keywords: trash, trash solid, delete

Trash

Keywords: trash, trash light, delete

Triangle

Keywords: Academy, excercise, layers, multi layer, diagram

Trophy

Keywords: award, achievement, victory, success, recognition

Truck

Keywords: vehicle, delivery, transport, cargo, logistics

Twitter solid

Keywords: social media

Twitter

Keywords: social media

Unlock solid

Keywords: unlock, unlock solid, lock, open

Unlock

Keywords: unlock, unlock light, lock, open

Upload cloud

Keywords: transfer, file, cloud, arrow, data

Upload

Keywords: transfer, file, cloud, data, arrow

User interface

Keywords: user interface, UI, layout, wireframe

User solid

Keywords: user, user solid, profile, account

User

Keywords: user, user light, profile, account

Video solid

Keywords: video, video solid, camera

Video

Keywords: video, video light, camera

Warning solid

Keywords: info, information, info triangle, info triangle solid, warning

Warning

Keywords: info, information, info triangle, warning

Watch

Keywords: watch, time

Workflow

Keywords: arrow, direction, work flow, pointer, forward

Workforce intelligence

Keywords: workforce intelligence, search

X circle

Keywords: communication, platform, microblogging, networking

X solid

Keywords: communication, platform, microblogging, networking

X

Keywords: communication, platform, microblogging, networking

Youtube circle

Keywords: video, streaming, media, platform, entertainment

Youtube solid

Keywords: video, streaming, media, platform, entertainment

Youtube

Keywords: video, streaming, media, platform, entertainment

Brand Icons

Agile

Keywords: agile, arrow

Agile2

Keywords: scrum, workflow, iteration, project, collaboration

Agriculture

Keywords: agriculture, crops, harvest, silo, field

Ambulance

Keywords: emergency, medical, healthcare, rescue, first aid

App code

Keywords: app development, add, interface, code

App development

Keywords: app development, add, interface, plus

App search

Keywords: app development, add, interface, search

Balance

Keywords: justice, equality, law, balance, fairness

Bar chart

Keywords: bar chart, diagram, chart, results

Bicycle

Keywords: bike, transportation, cycling, ride, outdoor

Bold chevron double

Keywords: arrow, direction, work flow, pointer, forward

Bold chevron

Keywords: arrow, direction, work flow, pointer, forward

Bolt logo colored

Keywords: design system

Box open

Keywords: package, delivery, container, unbox, storage

Briefcase

Keywords: briefcase, case, case type

Bullseye

Keywords: Academy, go to market, marketing, sales, direct, bullseye, arrow

Car

Keywords: vehicle, transportation, drive, automobile, road

Case management

Keywords: file, directory, storage, document

Cell tower

Keywords: communication, signal, broadcast, network, telecommunication

Center out

Keywords: expand, focus, radiate, distribute, outward

Certification

Keywords: certification, award, badge, approved, academy

Co browse

Keywords: co browse, dialogue, modal, window

Coffee

Keywords: beverage, cup, hot drink, tea, break

Collaboration

Keywords: connections

Communications

Keywords: communications, radar

Contract

Keywords: agreement, legal, document, signature, terms

Credit card

Keywords: credit card, money, payment, finance

Cube

Keywords: app exchange, cube, module, square, app

Currency

Keywords: money, finance, exchange, symbol, economy

Customer decision hub

Keywords: customer decision hub, CDH, polaris

Customer onboarding

Keywords: customer onboarding, add, personnel, member

Customer service

Keywords: customer service, chat bubbles, communication, chatting

Customer

Keywords: profile, account, avatar, personal, identity

Dashboard

Keywords: layout, structure, grid, stack, layers

Data integrations encrypted

Keywords: security, privacy, encryption, protection, data security

Data integrations

Keywords: data integrations, database, data, server

Decisioning

Keywords: process, automatic, artificial intelligence

Documentation

Keywords: book, docs, document, documentation, pages

Dollar circle

Keywords: dollar sign, coin, money, currency, pay

Email

Keywords: mail, letter, communication

Energy

Keywords: energy, lightning bolt, storm, natural disaster

Entertainment

Keywords: entertainment, tv, television, screen, monitor

Face happy

Keywords: face happy, smile, rating, like

Face sad

Keywords: face sad, frown, rating, dislike

Farmhouse

Keywords: cottage, home, rural, farmhouse, countryside

Fast delivery

Keywords: express, shipping, quick, rapid, service

Fast

Keywords: speed, quick, rapid, efficient, fast paced

Financial

Keywords: finances, calculator, counting, banking

Gavel

Keywords: justice, court, law, judge, decision

Genai analyze

Keywords: product, examine, evaluate, data, insight

Genai automate

Keywords: product, automation, artificial intelligence, control

Genai autopilot

Keywords: product, automation, artificial intelligence, control

Genai blueprint

Keywords: product, blueprint, artificial intelligence, control

Genai cdh

Keywords: product, choice, process, analysis

Genai coach

Keywords: product, coach, artificial intelligence, control

Genai knowledge buddy

Keywords: product, knowledge buddy, buddy, artificial intelligence, control

Genai socrates

Keywords: product, socrates, artificial intelligence, control

Government

Keywords: government, capitol, banking, university

Growth

Keywords: progress, development, expansion, increase, success

Health chart

Keywords: medical, wellness, statistics, monitoring

Health

Keywords: pulse, cardio, heartbeat, health, ekg

Healthcare

Keywords: health case, healthcare, health, hospital, health insurance

Hospital bed

Keywords: hospitality, bed, sleep, vacation

Hospital

Keywords: healthcare, medical, emergency, clinic, treatement

Hospitality

Keywords: accommodation, sleep, rest, comfort

House

Keywords: home, residence, dwelling, building, living

Ideas

Keywords: ideas, light bulb, think, shine, electricity

Imbalance

Keywords: healthcare, medical, emergency, clinic, unfair, inequality, justice, disbalance, uneven

Industries

Keywords: industry, manufacturing, production, warehouse

Insurance

Keywords: umbrella

Integration

Keywords: integration, app development, add, interface, plus

Intelligent automation

Keywords: ai, automation, efficiency, machine learning, technology

Intelligent virtual assistant

Keywords: intelligent virtual assistant, communications

Java

Keywords: java, low code, no code, html

Key

Keywords: unlock, security, access, password, protection

Knowledgebase

Keywords: knowledgebase, books, library, learn, documentation

Laptop

Keywords: computer, device, technology, portable

Life sciences

Keywords: life sciences, chemistry, DNA

List

Keywords: list, checklist, items

Loading

Keywords: progress, wait, processing, buffering, loading bar

Manufacturing

Keywords: manufacturing, data, chip, microchip

Media

Keywords: media, book, docs, document, documentation, pages

Meteor

Keywords: Academy, challenge, comet, meteor

Mining

Keywords: mining

Mobility

Keywords: mobile, mobility, cell phone

Molecule

Keywords: molecules, hive, honeycomb

Money bag

Keywords: wealth, finance, savings, cash, income

Money

Keywords: wealth, finance, savings, cash, income

Multiple case management

Keywords: file, directory, storage, document

Omni channel

Keywords: omnichannel, circles, RGB, overlap

Orbit

Keywords: module, molecule, orbit, academy

Package

Keywords: package, shipping, box, delivery, cargo

Parent child case

Keywords: file, directory, storage, document

Partners

Keywords: partners, employee, user, persona

Path

Keywords: path, map, location, subway

Pega announce

Keywords: announce, marketing, megaphone

Pega book

Keywords: book, docs, document, pages

Pega building complex

Keywords: business, corporation, organization, scale, innovation, building, building complex, office

Pega building

Keywords: enterprise, commerce, trade, organization, corporate

Pega catalyst

Keywords: vial

Pega chat double question

Keywords: message, communication, conversation, talk, discussion

Pega chat double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat double

Keywords: chat, circle, double

Pega chat question

Keywords: chat question, question, bubble

Pega chat square double question

Keywords: message, communication, conversation, talk, discussion

Pega chat square double typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square double

Keywords: message, communication, conversation, talk, discussion

Pega chat square question

Keywords: message, communication, conversation, talk, discussion

Pega chat square typing

Keywords: message, communication, conversation, talk, discussion

Pega chat square

Keywords: message, communication, conversation, talk, discussion

Pega chat typing

Keywords: chat typing, thinking, bubble

Pega chat

Keywords: sppech, bubble, communication

Pega compass

Keywords: compass, travel, direction

Pega connection hierarchy

Keywords: connection hierarchy, org chart, flow

Pega cosmos

Keywords: planet, moon, solar

Pega database

Keywords: data integrations, database, data, server

Pega disability

Keywords: disability, wheelchair, accessibility, handicap

Pega handshake

Keywords: handshake, volunteer, hands

Pega health shield

Keywords: health shield, healthcare, health, hospital, health insurance

Pega hub

Keywords: hub, connection hierarchy, org chart, radiate

Pega instructor

Keywords: instructor, ILT, teacher, learning

Pega map

Keywords: map, location, event

Pega network

Keywords: network, globe, earth, planet, language

Pega patterns

Keywords: patterns, shapes, pathing, flow

Pega people

Keywords: people, org, partners, group, users

Pega phone call

Keywords: phone, phone call, phone light, communication, call

Pega phone ringing

Keywords: call, incoming, communication, alert, ringtone

Pega pie chart

Keywords: pie chart, diagram

Pega pin drop circle

Keywords: location, marker, map, point, attachment

Pega pin drop

Keywords: location, marker, map, point, attachment

Pega pin

Keywords: pin, pushpin, marker, map, location

Pega plane

Keywords: plane, travel, global

Pega process ai

Keywords: ai, machine learning, technology, automation, innovation

Pega process fabric

Keywords: air, wind, waves, flow

Pega process mining

Keywords: mining, process mining, data mining, pick axe

Pega send submit

Keywords: paper airplane, flight, paper airplane, email, transfer, submit, share, deliver, forward

Pega tag

Keywords: tag, sales, retail, price

Pega thumbs up

Keywords: thumbs up, like, rate, rating

Pega timer

Keywords: timer, stop watch, speed

Personal chart

Keywords: notes, data, statistics

Personalized

Keywords: custom, tailored, unique, individual, profile

Picture

Keywords: picture, placeholder

Platform

Keywords: platform, layered cake, layers

Prembridge

Keywords: prembridge, cloud, connect, link

Presentation

Keywords: presentation, chart, diagram

Print

Keywords: printer, print

Product delivery

Keywords: app, product delivery, upload

Reporting

Keywords: reporting, graph, chart, data

Retail

Keywords: shirt, collar, business

Ribbon

Keywords: ribbon, certificate, award, medal

Robo auto

Keywords: robotic automation, robot, genai, assistant

Rocket

Keywords: Academy, rocket, ship, space, travel

Sales automation

Keywords: sales automation, funnel, filter

Scalability

Keywords: crop, scale, responsive, adaptable, adjustable

Small business

Keywords: entrepreneur, startup, local, commerce, ownership

Speed dial

Keywords: speedometer, acceleration, speed dial

Support

Keywords: support, life saver, rescue

System admin

Keywords: system admin, license, employee, user ID

Target

Keywords: goal, aim, focus, objective, precision

Tools

Keywords: equipment, repair, maintenance, instruments, work

Transportation

Keywords: transportation, bus, travel, commute

Triangle

Keywords: Academy, excercise, layers, multi layer, diagram

Trophy

Keywords: award, achievement, victory, success, recognition

Truck

Keywords: vehicle, delivery, transport, cargo, logistics

User interface

Keywords: user interface, UI, layout, wireframe

Watch

Keywords: watch, time

Workflow

Keywords: arrow, direction, work flow, pointer, forward

Workforce intelligence

Keywords: workforce intelligence, search

UI Icons

Add circle

Keywords: plus, add, add circle, outline

Add single

Keywords: plus, add

Add solid

Keywords: plus, solid plus, add

Add

Keywords: plus, add

Arrow down

Keywords: arrow, arrow down, down

Arrow left

Keywords: arrow, arrow left, left

Arrow right

Keywords: arrow, arrow right, right

Arrow up

Keywords: arrow, arrow up, up

Bar chart circle

Keywords: round, data

Bar chart growth

Keywords: data, graph, analysis, statistics, comparison

Bell solid

Keywords: bell, bell solid

Bell

Keywords: bell, bell light

Calendar solid

Keywords: calendar, calendar solid, event, date

Calendar

Keywords: calendar, calendar light, event, date

Cart solid

Keywords: cart, cart solid, shopping, commerce, checkout

Check circle

Keywords: check, approved, check circle, correct

Check single

Keywords: check, approve, checkmark

Check solid

Keywords: check, approved, check circle, check solid, correct

Check

Keywords: check, approve, checkmark

Chevron down

Keywords: chevron, chevron down, arrow, down

Chevron left

Keywords: chevron, chevron left, arrow, left

Chevron right

Keywords: chevron, chevron right, arrow, right

Chevron up

Keywords: chevron, chevron up, arrow, up

Clock circle

Keywords: clock circle, clock, clock light, time

Clock solid

Keywords: clock circle, clock, clock solid, time

Close circle

Keywords: close, cancel, close circle

Close single

Keywords: close, cancel, X

Close solid

Keywords: close, cancel, close circle, close solid

Close

Keywords: close, cancel, X

Closed caption solid

Keywords: subtitles, accessibility, video, text

Closed caption

Keywords: subtitles, accessibility, video, text

Cloud solid

Keywords: cloud, cloud solid

Cloud

Keywords: cloud, cloud light

Copy to clipboard

Keywords: copy to clipboard, duplicate, pages

Directional down

Keywords: chevron, arrow, solid, down

Directional left

Keywords: chevron, arrow, solid, left

Directional right

Keywords: chevron, arrow, solid, right

Directional up

Keywords: chevron, arrow, solid, up

Download cloud

Keywords: download, cloud

Download

Keywords: download

Exclamation solid

Keywords: alert, warning, emphasis

Exclamation

Keywords: alert, warning, emphasis

External link

Keywords: external link, new window

Eye off solid

Keywords: eye, eye off, eye solid, not visible

Eye off

Keywords: eye, eye off, eye light, not visible

Eye solid

Keywords: eye, eye solid, visible

Eye

Keywords: eye, eye light, visible

Filter solid

Keywords: filter, filter solid, funnel

Filter

Keywords: filter, filter light, funnel

Flag solid

Keywords: flag, location, country

Flag

Keywords: flag, location, country

Forward

Keywords: forward, arrow, share

Full screen off

Keywords: contract, full screen off, minimize, shrink

Full screen on

Keywords: expand, full screen, enlarge, maximize

Globe circle

Keywords: world, map, round, empty

Globe

Keywords: globe, earth, planet, language

Grid

Keywords: grid, 9 grid, nine

Heart solid

Keywords: heart, heart solid, like, favorite

Heart

Keywords: heart, heart light, like, favorite

Info circle

Keywords: info, information, info circle

Info solid

Keywords: info, information, info circle, info circle solid

Interactive

Keywords: interactive, swipe, swipe right, touch, mobile

Link

Keywords: link, link light, chain, connect

Lock solid

Keywords: locked, locked solid, lock

Lock

Keywords: locked, locked light, lock

Map pin solid

Keywords: map pin solid, mark, location, pin

Map pin

Keywords: map pin, mark, location, pin

Menu

Keywords: hamburger, list, lines

Minus circle

Keywords: minus, minus circle, subtract

Minus single

Keywords: minus, subtract, dash

Minus solid

Keywords: minus, minus circle, minus solid, subtract

Minus

Keywords: minus, subtract, dash

More vertical

Keywords: options, menu, expand, additional, vertical

More

Keywords: options, menu, expand, additional

Network solid

Keywords: sort, sort light, ascending

Network

Keywords: network, globe, earth, planet, language

Pause solid

Keywords: stop, break, delay, control

Pause

Keywords: stop, break, delay, control

Pega cart

Keywords: cart, cart light, shopping, commerce, checkout

Pega download pdf

Keywords: download, pdf

Pega mention

Keywords: email, symbol, address, communication

Pega setting

Keywords: settings, gear, settings light

Pega shuffle

Keywords: shuffle, double arrow

Pega subtitle

Keywords: caption, text, video, translation

Pega subtitles solid

Keywords: caption, text, video, translation

Pega wifi

Keywords: wifi, wifi light, signal

Pencil solid

Keywords: pencil solid, pencil, edit

Pencil

Keywords: pencil outline, pencil, edit

Phone call solid

Keywords: phone, phone call, phone solid, communication, call

Phone call

Keywords: phone, phone call, phone light, communication, call

Play solid

Keywords: start, media, video, audio

Play

Keywords: start, media, video, audio

Podcast solid

Keywords: podcast, microphone, mic, podcast solid, speech, talk

Podcast

Keywords: podcast, microphone, mic, podcast light, speech, talk

Refresh

Keywords: refresh, reload, arrows

Reload

Keywords: refresh, update, restart, loop, reset

Reply

Keywords: response, message, communication, reply arrow

Search

Keywords: search, search light, magnify

Setting solid

Keywords: settings, gear, settings solid

Share solid

Keywords: share, share solid

Share

Keywords: share, share light

Sort descending

Keywords: sort, sort light, descending

Sort

Keywords: sort, sort light, ascending

Star solid

Keywords: rating, favourite, achievement

Star

Keywords: rating, favourite, achievement

Text align center

Keywords: alignment, text, format, layout

Text align left

Keywords: alignment, text, format, layout

Text align right

Keywords: alignment, text, format, layout

Trash solid

Keywords: trash, trash solid, delete

Trash

Keywords: trash, trash light, delete

Unlock solid

Keywords: unlock, unlock solid, lock, open

Unlock

Keywords: unlock, unlock light, lock, open

Upload cloud

Keywords: transfer, file, cloud, arrow, data

Upload

Keywords: transfer, file, cloud, data, arrow

User solid

Keywords: user, user solid, profile, account

User

Keywords: user, user light, profile, account

Video solid

Keywords: video, video solid, camera

Video

Keywords: video, video light, camera

Warning solid

Keywords: info, information, info triangle, info triangle solid, warning

Warning

Keywords: info, information, info triangle, warning

Social Icons

Facebook circle

Keywords: network, communication, platform, logo

Facebook solid

Keywords: network, communication, platform, logo

Facebook

Keywords: network, communication, platform, logo

Github circle

Keywords: code, repository, development, collaboration, open source

Github solid

Keywords: code, repository, development, collaboration, open source

Github

Keywords: code, repository, development, collaboration, open source

Linkedin circle

Keywords: professional, networking, career, platform

Linkedin solid

Keywords: professional, networking, career, platform

Linkedin

Keywords: professional, networking, career, platform

Twitter solid

Keywords: social media

Twitter

Keywords: social media

X circle

Keywords: communication, platform, microblogging, networking

X solid

Keywords: communication, platform, microblogging, networking

X

Keywords: communication, platform, microblogging, networking

Youtube circle

Keywords: video, streaming, media, platform, entertainment

Youtube solid

Keywords: video, streaming, media, platform, entertainment

Youtube

Keywords: video, streaming, media, platform, entertainment

Twig
{% include '@bolt-elements-icon/icon.twig' with {
  name: 'bell-solid',
} only %}
HTML
<svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon size

Icon Size A Icon’s size can be modified per use case.
Important Notes: Reference the schema for all options. Again, Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  size: 'xlarge',
  ...
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--xlarge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon color

Icon Color A Icon’s color can be modified per use case.
Important Notes: Reference the schema for all options. Additionally, a CSS custom property is available to change the icon color to any brand color. Define --e-bolt-icon-color inline style rule to set the desired color. Reference Color Tokens for all available brand colors. Again, Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  color: 'navy',
  ...
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--navy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon use case custom svg

Icon Use Case: Custom SVG Custom SVG can be used instead to render an icon that is not available in the design system.
Important Notes: When creating a custom SVG, start with a 32px by 32px artboard in the design tool (Adobe Illustrator, Sketch, etc.). Make sure all layers have been converted to objects, meaning there is no stroke, only shapes with color fill. Combine all objects if they visually connect (i.e. create one big shape). Set the object’s fill color to #001F5F. Set the widest side to 32px and center the icon within the artboard. Save the SVG and then use imgoptim or another tool to minify it. Lastly: If you choose Twig usage: Add the relevant attributes {{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true" to the <svg> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the custom_icon_path prop. If you choose HTML usage: Add class="e-bolt-icon" along with relevant modifier class for each prop, and the attribute aria-hidden="true" to the <svg> HTML element. Then you can display the icon using the modified <svg> markup.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  custom_icon_path: 'full/path/to/custom-icon-file.twig',
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path fill="#151619" d="m32 16c0 8.8-7.2 16-16 16s-16-7.2-16-16 7.2-16 16-16 16 7.2 16 16zm-3.1 0-1.7 1.4-4-3.8 1.1-5.4 2.2.2c-1.6-2.2-3.9-3.9-6.5-4.7l.9 2.1-4.9 2.7-4.8-2.7.8-2.1c-2.6.9-4.8 2.5-6.5 4.7l2.2-.2 1 5.4-4 3.8-1.6-1.4c0 2.8.9 5.4 2.5 7.6l.5-2.2 5.5.7 2.3 5-1.9 1.2c2.6.8 5.4.8 8 0l-1.9-1.1 2.3-5 5.5-.7.5 2.2c1.6-2.3 2.5-4.9 2.5-7.7zm-16 4.5-1.9-5.9 5-3.6 5 3.6-1.9 5.9z"/></svg>

icon javascript usage

Icon Javascript Use The imported icon is a function that returns an <svg> element as a string. It automatically includes the e-bolt-icon class on the SVG. The function accepts a JSON object as an argument. It supports the same props as the Icon element, for example: chevronDown({ size: 'xsmall', class: 'u-bolt-margin-right-xsmall' }). If you are using a web component, wrap the icon in unsafeHTML() as follows: ${unsafeHTML(iconChevronDown())}.
Important Notes: A real-world example can currently be found in AccordionItemTrigger.js, shown in an altered demo below.
import { html, unsafeHTML } from '@bolt/element';
import { iconChevronDown } from '@bolt/elements-icon';

return html`
  
${unsafeHTML(iconChevronDown())}
`;

image docs

Image

A responsive image embed.

Twig Usage
{% include '@bolt-elements-image/image.twig' with {
  fill: true,
  attributes: {
    alt: 'Image alt text',
    src: 'path/image.jpg',
    width: 500,
    height: 500,
  },
} 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
fill

Render the image 100% wide, filling up the full width of its parent container.

boolean
background

Render the image as a background image. This sets the image to be absolute positioned, only use this prop if the image is inside a non-static container.

boolean
Install Install
npm install @bolt/elements-image
Dependencies @bolt/core

image

Basic Image An image element embeds a responsive graphic on the page.
Important Notes: To make an image accessible to screen readers and other assistive technology, make sure to include text description via the alt attribute. To indicate an image as decoration, leave the alt attribute blank, do not remove it. For example: alt="". It is best practice to always define the width and height attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts. If responsiveness is not needed, please use a plain <img> element instead.
Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with {
  attributes: {
    alt: 'Alt text.',
    src: 'path/image.jpg',
    width: 400,
    height: 225,
  },
} only %}
HTML
<img alt="Alt text." src="path/image.jpg" width=400 height=225 class="e-bolt-image">

image srcset and sizes

Responsive Resolutions Use the srcset and sizes attributes to render various resolutions of the same image at specific breakpoints.
Important Notes: The srcset attribute accepts one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of a URL to an image and a width descriptor. For example, srcset="image/400x300.jpg 400w, image/800x600.jpg 800w, image/1600x1200.jpg 1600w". The sizes attribute should contain a number value with the vw unit. The number should be determined by the largest size which the image could take up relative to screen size. For example, a large image taking up full width of a page should use something around 96vw to 100vw; a small image taking up 1 column of a 3-column layout should use 33vw. For more advanced use cases, reference the MDN article on responsive images.
Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with {
  attributes: {
    alt: 'Alt text.',
    src: 'path/image-800.jpg',
    srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w',
    sizes: '50vw',
    width: 800,
    height: 450,
  },
} only %}
HTML
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="50vw" width=800 height=450 class="e-bolt-image">

image fill

Fill Image The fill prop will stretch the image to fill up 100% width of its parent container, ignoring the image’s true width and height.
Important Notes: Even though they are ignored, it is best practice to always define the width and height attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.
Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with {
  fill: true,
  attributes: {
    alt: 'Alt text.',
    src: 'path/image-800.jpg',
    srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w',
    sizes: '96vw',
    width: 800,
    height: 450,
  },
} only %}
HTML
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="96vw" width=800 height=450 class="e-bolt-image e-bolt-image--fill">

image background

Simple Background Image The background prop will transform the image into a background image.
Important Notes: The image must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky). It must be the first child of said container. All foreground content of said container must be positioned relative. Most background images are decorative, it is reasonable to leave the alt attribute blank for such case. It is recommended to use the srcset and sizes attributes for better performance.
Demo
This is a non-static container
Twig
<div style="position:relative;">
  // This image will fill up the non-static parent container
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: 'path/image-1600.jpg',
      srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w',
      sizes: '100vw',
      width: 1600,
      height: 900,
    },
  } only %}

  <div style="position:relative;">
    // Content goes here after the image
  </div>
</div>
HTML
<div style="position:relative;">
  // This image will fill up the non-static parent container
  <img src="path/image-1600.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w" sizes="100vw" width=1600 height=900 class="e-bolt-image e-bolt-image--bg" alt="">

  <div style="position:relative;">
    // Content goes here after the image
  </div>
</div>
Use Case: Advanced Background Image In addition to the background prop, there are 2 CSS custom properties available for use to further customize background image(s). They are commonly used when multiple decorative background images are required.
Important Notes: --e-bolt-image-fit Setting this to none will allow the background image to stay exactly at its specified width and height. Setting this to contain will allow the background image to be contained within its parent container. No cropping will happen to the image. By default, this is set to cover. More advanced options are supported, reference the CSS property object-fit. --e-bolt-image-position This custom property accepts pair values: x-axis and y-axis position tokens (e.g. top left, top center, top right, bottom left, bottom center, bottom right, left center, right center, center center). By default, this is set to center center. More advanced options are supported, reference the CSS property object-position.
Demo Setting fit to contain
Setting fit to none and position to exact directions
Twig
<div style="position:relative;">
  // This background image will not be cropped and it is positioned to center of the non-static parent container.
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: 'path/image.jpg',
      width: 500,
      height: 500,
      style: '--e-bolt-image-fit: contain; --e-bolt-image-position: center center;',
    },
  } only %}

  // This background image will not stretch and it is positioned to top left of the non-static parent container.
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: 'path/image.jpg',
      width: 150,
      height: 150,
      style: '--e-bolt-image-fit: none; --e-bolt-image-position: top left;',
    },
  } only %}
</div>
HTML
<div style="position:relative;">
  // This background image will not be cropped and it is positioned to center of the non-static parent container.
  <img src="path/image.jpg" width=500 height=500 style="--e-bolt-image-fit: contain; --e-bolt-image-position: center center;" class="e-bolt-image e-bolt-image--bg" alt="">

  // This background image will not stretch and it is positioned to top left of the non-static parent container.
  <img src="path/image.jpg" width=150 height=150 style="--e-bolt-image-fit: none; --e-bolt-image-position: top left;" class="e-bolt-image e-bolt-image--bg" alt="">
</div>

image use case art direction

Use Case: Art Direction The <picture> HTML element can help with art directing a particular graphical area of a page.
Important Notes: When to use just the image element: loading different resolutions of the same image based on screen size. When to use the <picture> HTML element: loading completely different images altogether based on screen size. The srcset attribute should be used. The x descriptor should be used after the image file URL. This helps with loading higher resolution images for monitors with higher DPI. The media attribute should be used to indicate multiple breakpoints. For more advanced use cases, reference the MDN article on responsive images.
Demo
Alt text.

Completely different images are loaded via the <picture> HTML element, resize this page to see the image on the left change.

Twig
<picture>
  // Set the image sources
  <source srcset="path/image-2x.jpg 2x, path/image.jpg" media="(min-width: 1000px)">
  <source srcset="path/image-b-1200.jpg 2x, path/image-b-600.jpg" media="(min-width: 600px)">
  <source srcset="path/image-a-600.jpg 2x, path/image-a-300.jpg" media="(min-width: 300px)">

  // Set the fallback image
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'path/image.jpg',
      srcset: 'path/image-2x.jpg 2x',
      width: 1000,
      height: 500,
    },
  } only %}
</picture>
HTML
<picture>
  // Set the image sources
  <source srcset="path/image-2x.jpg 2x, path/image.jpg" media="(min-width: 1000px)">
  <source srcset="path/image-b-1200.jpg 2x, path/image-b-600.jpg" media="(min-width: 600px)">
  <source srcset="path/image-a-600.jpg 2x, path/image-a-300.jpg" media="(min-width: 300px)">

  // Set the fallback image
  <img src="path/image.jpg" srcset="path/image-2x.jpg 2x" width=1000 height=500 class="e-bolt-image" alt="Alt text.">
</picture>

list docs

List

Semantic list for displaying a group of items.

Usage recommendations
Recommended Not Recommended
List Related Items: Stick to items that belong in the same category or serve a similar function. Skip Complexity: Avoid embedding complex structures like nested lists or other HTML elements unless essential.
Order Matters: If the sequence is important, use an ordered list. Otherwise, an unordered list will suffice. Not for Layout: Don't use lists for page layout or to achieve visual design effects.
Concise Items: Keep list items short and to the point for easy scanning. Avoid Mixing Types: Stick to either ordered or unordered lists within a single list block to prevent confusion.
Twig Usage
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  ...
{% include '@bolt-elements-list/list.twig' with {
  content: list_items
} only %}
Schema
List (list.twig)
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 List. List Items are expected here.

any
tag

Set the semantic tag for the list, or span for a specific usecase

string ul
  • ul, ol, span
display

Display either an horizontal list of items or a vertical list of items. Responsive options are also available for transforming from block to horizontal at specific breakpoints.

string vertical
  • vertical, horizontal, horizontal@xxsmall, horizontal@xsmall, horizontal@small, horizontal@medium
spacing

Control the spacing in between items.

string xsmall
  • none, xxsmall, xsmall, small, medium, large, xlarge
separator

Display a separator in between items.

string none
  • none, solid, dashed
align

Control the horizontal alignment of items.

string start
  • start, center, end, justify
valign

Control the vertical alignment of items.

string center
  • start, center, end
inset

Set spacing on the inside of each item.

boolean false
nowrap

Prevent horizontal/flex list items from wrapping to a second line.

boolean false
List Item (list-item.twig)
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 List Item.

any
Install Install
npm install @bolt/elements-list
Dependencies @bolt/core

list

Basic List The List element represents a list of items.
Important Notes: A List is for grouping a collection of items and shouldn't be used for creating layouts. For creating a page layout, it's recommended to use Layout. The List element is a replacement for the List component.
Demo
  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 1',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 2',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 3',
  } only %}
{% endset %}

{% include '@bolt-elements-list/list.twig' with {
  content: list_items
} only %}
HTML
<ul class="e-bolt-list">
  <li class="e-bolt-list__item">Item 1</li>
  <li class="e-bolt-list__item">Item 2</li>
  <li class="e-bolt-list__item">Item 3</li>
</ul>

list tag

List Tag Choose between ul and ol tags when creating a List or span in a specific usecases.
Important Notes: The ul tag is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. On the other hand, with the ol tag, the order is meaningful. Sometimes a semantic list ul or ol need to be converted to non-semantic version due to design purposes - for achieving visual effect. Find special usecases when a span is used. It's important to know that ul and ol have their own styles. When using span tag, font-family, font-size, font-weight, line-height, inherit from parent element.
Demo

UL

  • Item
  • Item
  • Item

OL

  1. Item 1
  2. Item 2
  3. Item 3

SPAN

Item
Item
Item
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'first item',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'second item',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'third item',
  } only %}
{% endset %}

{% include '@bolt-elements-list/list.twig' with {
  tag: 'ol',
  content: list_items
} only %}
HTML
<ol class="e-bolt-list">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ol>

list display

List Display The display of the List Items can be set to vertical or horizontal.
Important Notes: When the display prop is set to vertical, List Items are full-width, stacked on one another. When the display prop is set to horizontal, List Items are side by side and take the width of the content. List Items can be of different widths if the content differs in length. When the display prop is set to horizontal@[Breakpoint], List Items are vertical below the specified breakpoint (xxsmall, xsmall, small or medium) and horizontal above the breakpoint. View the following Lists in different viewports to observe the behavior.
Demo

Vertical List Items are full-width.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six

Horizontal List Items wrap and are only content-width.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
  • Item Eight
  • Item Nine
  • Item Ten

A horizontal@medium List is horizontal above the chosen breakpoint and vertical below.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
Twig
{% set list_items %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: placeholder_1,
    } only %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: placeholder_2,
    } only %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: placeholder_3,
    } only %}
  {% endset %}
{% include '@bolt-elements-list/list.twig' with {
  display: 'horizontal',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--display-horizontal">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Thitd item</li>
</ul>

list nowrap

List with No Wrapping Prevent List Items from wrapping with the nowrap prop.
Important Notes: The nowrap prop only works when the display prop is set to horizontal. This prop prevents List Items from wrapping, which means they can potentially overflow the parent container. View the following List in different viewports to observe the behavior.
Demo

Horizontal list with nowrap

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_3,
  } only %}
  ...
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
  display: 'horizontal',
  nowrap: true,
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--display-horizontal e-bolt-list--nowrap">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
  <li class="e-bolt-list__item">Fourth item</li>
  <li class="e-bolt-list__item">Fifth item</li>
  <li class="e-bolt-list__item">Sixth item</li>
  <li class="e-bolt-list__item">Seventh item</li>
  <li class="e-bolt-list__item">Eighth item</li>
  <li class="e-bolt-list__item">Ninth item</li>
</ul>

list spacing

List Spacing Modify the space between List Items.
Important Notes: Regular spacing used in combination with the inset prop puts additional spacing around each List Item.
Demo

Vertical list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_3,
  } only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
  spacing: 'medium',
  content: list_items,
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--spacing-medium">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>

list separator

List with Separator List Items can be separated by a horizontal or vertical line. The separator style can be solid or dashed.
Important Notes: The separator color adjusts automatically based on the Theming System. If required, you can override the separator's color by changing the List's --m-bolt-border CSS var with the attributes object.
Demo

Solid separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: item_3,
  } only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
  separator: 'solid',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--separator-solid">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>

list inset

List with Inset Spacing Add inset spacing to List Items.
Important Notes: The inset prop adds a space on all sides of List Items.
Demo

Regular spacing in a vertical list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a vertical list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_3,
  } only %}
{% endset %}

{% include '@bolt-elements-list/list.twig' with {
  separator: 'solid',
  inset: true,
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--separator-solid e-bolt-list--inset">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>

list align

List with Horizontal Alignment Adjust the horizontal alignment of List Items.
Important Notes: The align prop only works when the display prop is set to horizontal.
Demo

Horizontally align horizontal content: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: justify

  • Item 1
  • Item 2
  • Item 3
Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_1,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_2,
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: placeholder_3,
  } only %}
{% endset %}
{% include '@bolt-elements-list/list.twig' with {
  align: 'justify',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--align-justify">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>

list valign

List with Vertical Alignment Adjust the vertical alignment of List Items.
Important Notes: The valign prop only works when the display prop is set to horizontal.
Demo

Vertically align horizontal content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: end

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: end

  • Item 1
  • Item 2
  • Item 3
Twig
{% include '@bolt-elements-list/list.twig' with {
  valign: 'start',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--valign-start">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>

list use cases

List Use Cases The List element represents a list of items.
Important Notes: A List is for grouping a collection of items and shouldn't be used for creating layouts. For creating a page layout, it's recommended to use Layout. Below are examples of List usage inside a layout. The blue color indication is for demo purposes only.
Demo

What we do

The Pega Platform™ makes it simpler for enterprises to work smarter, unify experiences, and adapt instantly. Thanks to our scalable, made-to-measure architecture, even the biggest organizations can stay streamlined and ready for what’s next.


Governance

One of the objectives of Pega is to build a fast-growing, profitable enterprise that rewards our employees, shareholders, and partners. To achieve this, we must continuously earn the trust of our many stakeholders: employees, customers, partners, suppliers, shareholders, government officials, and the general public.

Twig
{% set intro %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'What we do',
    hierarchy: 'headline',
    tag: 'h2',
    size: 'xxlarge',
  } only %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'The Pega Platform™ makes it simpler for enterprises to work smarter...',
  } only %}
  {% set list_items %}
    {% set button_1 %}
      {% include '@bolt-elements-button/button.twig' with {
        content: 'Explore products',
        attributes: {
          href: 'https://google.com',
        }
      } only %}
    {% endset %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: button_1,
    } only %}
    //More buttons if needed
  {% endset %}
  {% include '@bolt-elements-list/list.twig' with {
    display: 'horizontal',
    content: list_items,
  } only %}
{% endset %}
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: intro
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    '50@from-medium',
  ],
} only %}
HTML
<bolt-layout template="50@from-medium">
  <bolt-layout-item>
    <p class="e-bolt-type">
      The Pega Platform™ makes it simpler for enterprises to work smarter, unify experiences, and adapt instantly. Thanks to our scalable, made-to-measure architecture, even the biggest organizations can stay streamlined and ready for what’s next.</p>
    <ul class="e-bolt-list e-bolt-list--display-horizontal e-bolt-list--spacing-xsmall e-bolt-list--align-start e-bolt-list--valign-center">
      <li class="e-bolt-list__item">
        <a href="https://google.com" class="e-bolt-button">Explore products</a>
      </li>
      <li class="e-bolt-list__item">
      <a href="https://google.com" class="e-bolt-button e-bolt-button--secondary">Why Pega</a>
      </li>
    </ul>
  </bolt-layout-item>
</bolt-layout>

list non semantic use case

Non Semantic List Use Case Using the span tag for lists in interactive elements and other non-semantic contexts.
Important Notes: This has more of a decorative context than a semantic one or for organize content, making it more readable and visually balanced. Sometimes there are situations where we need to create a list inside an interactive element, like a button. In these cases, we cannot use standard list tags like ul or ol because, for semantic reasons, certain HTML tags cannot be nested inside others. This is an example of when it's appropriate to use the span tag to wrap list items, ensuring both functionality and semantic correctness. Additionally, there are other contexts where using ul or ol is not semantically appropriate, such as within specific structural or inline elements, and in such cases, the span tag offers a more suitable solution.
Demo
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..

Latest News Semptember 2024

Headline link

Twig
{% set list_items %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 1',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 2',
  } only %}
  {% include '@bolt-elements-list/list-item.twig' with {
    content: 'item 3',
  } only %}
{% endset %}

{% include '@bolt-elements-list/list.twig' with {
  content: list_items,
  tag: 'span'
} only %}
HTML
<span class="e-bolt-list">
  <span class="e-bolt-list__item">Item 1</li>
  <span class="e-bolt-list__item">Item 2</li>
  <span class="e-bolt-list__item">Item 3</li>
</span>

menu docs

Menu

A vertical list of interactive list items. This component is usually used inside a popover container to provide additional actions.

Twig Usage
{% set menu_item_one %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item One',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_two %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Two',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set menu_item_three %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Menu Item Three',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}
{% set list_items %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_one,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_two,
  } only %}
  {% include '@bolt-elements-menu/menu-item.twig' with {
    content: menu_item_three,
  } only %}
{% endset %}

{% include '@bolt-elements-menu/menu.twig' with {
  content: list_items,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Menu (menu.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

object
content

Menu items. Accepts @bolt-elements-menu/menu-item.twig.

string , array , object
title

The menu element can have a title if needed.

string
spacing

Controls the inset spacing of each menu item.

string small
  • xsmall, small, medium
Menu li (menu-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

object
content

Menu item. It's recommended to use a basic text link here @bolt-elements-text-link/text-link.twig

any
Install Install
npm install @bolt/elements-menu
Dependencies @bolt/core

menu

Basic Menu Menu is a list of actions for the user to perform.
Important Notes: Menu is usually used inside of a Popover. Menu items must be valid interactive elements - links or buttons. It's recomended to use only Text Link Element for menu items. The Text Link Element can be a link when using a href prop inside attributes but can be changed to text link as a semantic button if needed, by using the type prop.
Demo
Light Theme
  • Dark Theme
  • Twig
    {% set menu_item_one %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item One',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_two %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Two',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_three %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Three',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set list_items %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_one,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_two,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_three,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-menu/menu.twig' with {
      content: list_items,
    } only %}
    HTML
    <menu class="e-bolt-menu">
      <li class="e-bolt-menu__item">
        <button type="button" class="e-bolt-text-link">
          Menu Item One
        </button>
      </li>
      <li class="e-bolt-menu__item">
        <button type="button" class="e-bolt-text-link">
          Menu Item Two
        </button>
      </li>
      <li class="e-bolt-menu__item">
        <button type="button" class="e-bolt-text-link">
          Menu Item Three
        </button>
      </li>
    </menu>

    menu title variations

    Menu title Create a title for the menu by using the title prop.
    Important Notes: When choosing a title for the menu and using plain HTML, the structure is slightly different. The menu tag must be wrapped in a div with e-bolt-menu class.
    Demo

    Choose one of these

  • Twig
    {% set menu_item_one %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item One',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_two %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Two',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_three %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Three',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set list_items %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_one,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_two,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_three,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-menu/menu.twig' with {
      title: 'Choose one of these',
      content: list_items,
    } only %}
    HTML
    <div class="e-bolt-menu">
      <h2 class="e-bolt-menu__title">This is the menu title</h2>
      <menu>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item One
          </button>
        </li>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item Two
          </button>
        </li>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item Three
          </button>
        </li>
      </menu>
    </div>

    menu spacing variations

    Menu spacing Control the spacing around each menu item by using the spacing prop. Reference spacing options in the schema. Demo

    This is a menu with xsmall spacing

  • This is a menu with small spacing

  • This is a menu with medium spacing

  • Twig
    {% set menu_item_one %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item One',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_two %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Two',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set menu_item_three %}
      {% include '@bolt-elements-text-link/text-link.twig' with {
        content: 'Menu Item Three',
        attributes: {
          type: 'button',
        }
      } only %}
    {% endset %}
    {% set list_items %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_one,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_two,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_three,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-menu/menu.twig' with {
      spacing: 'medium',
      content: list_items,
    } only %}
    HTML
    <div class="e-bolt-menu e-bolt-menu--spacing-medium">
      <h2 class="e-bolt-menu__title">This is the menu title</h2>
      <menu>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item One
          </button>
        </li>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item Two
          </button>
        </li>
        <li class="e-bolt-menu__item">
          <button type="button" class="e-bolt-text-link">
            Menu Item Three
          </button>
        </li>
      </menu>
    </div>

    menu use case icons

    Icon before and after menu item text Icons can be used in tandem with a Text Link, see how to use icon with the Text Link Element. An icon can be placed before and/or after the text. The Icon Element is recommended for appending icons. However, an <img> element is also acceptable.
    Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size prop for the icon element is not supported in this scenario.
    Demo
  • Twig
    {% set icon_facebook %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'facebook-solid',
      } only %}
    {% endset %}
    {% set icon_X %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'x',
      } only %}
    {% endset %}
    {% set icon_linkedin %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'linkedin-solid',
      } only %}
    {% endset %}
    
    {% set list_items %}
      {% set menu_item_one %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Menu Item One',
          icon_before: icon_facebook,
          attributes: {
            type: 'button',
          }
        } only %}
      {% endset %}
      {% set menu_item_two %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Menu Item Two',
          icon_before: icon_X,
          attributes: {
            type: 'button',
          }
        } only %}
      {% endset %}
      {% set menu_item_three %}
        {% include '@bolt-elements-text-link/text-link.twig' with {
          content: 'Menu Item Three',
          icon_before: icon_linkedin,
          attributes: {
            type: 'button',
          }
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_one,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_two,
      } only %}
      {% include '@bolt-elements-menu/menu-item.twig' with {
        content: menu_item_three,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-menu/menu.twig' with {
      content: list_items,
    } only %}
    HTML
    <menu class="e-bolt-menu">
      <li class="e-bolt-menu__item">
        <button type="button" class="e-bolt-text-link">
          <span class="e-bolt-text-link__icon-before" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
          This menu item contains a button with icon before
        </button>
      </li>
      <li class="e-bolt-menu__item">
        <button type="button" class="e-bolt-text-link">
          This menu item contains a button with icon after
          <span class="e-bolt-text-link__icon-after" aria-hidden="true"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg></span>
        </button>
      </li>
    </menu>

    menu use case popover

    Popover menu Create a popover menu by combining the Popover and Menu components. Demo

    Choose one of these

  • Twig
    {% set popover_trigger %}
      {% include '@bolt-elements-button/button.twig' with {
        content: 'Popover menu',
        size: 'xsmall',
        attributes: {
          type: 'button'
        }
      } only %}
    {% endset %}
    {% set popover_content %}
      {% set list_items %}
        {% set menu_item_one %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item One',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% set menu_item_two %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Two',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% set menu_item_three %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Three',
            attributes: {
              type: 'button',
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_one,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_two,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_three,
        } only %}
      {% endset %}
    
      {% include '@bolt-elements-menu/menu.twig' with {
        title: 'Choose one of these',
        content: list_items,
      } only %}
    {% endset %}
    
    {% include '@bolt-components-popover/popover.twig' with {
      trigger: popover_trigger,
      content: popover_content,
      spacing: 'none',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    printable docs

    Printable

    An media container that styles children HTML elements for print.

    Install Install
    npm install @bolt/elements-printable
    Dependencies @bolt/core

    printable

    Basic Printable A Printable element can be used for any content you wish to be visible and styled in print mode.
    Important Notes: You must add the e-bolt-printable class to the <body> element. It will hide everything on the page in print mode. Then add the the e-bolt-printable__article class to the article container. This class will make the article visible in print mode. Additionally, print specific styles are set for many plain HTML elements.
    Demo

    This is an example of an element to be printed

    Only the heading and this paragraph will be shown in print mode. Click “Open in new tab” to view it outside of Pattern Lab, then in the browser menu click “Print”.

    Twig
    Not available in Twig. Please use plain HTML.
    HTML
    <body class="e-bolt-printable">
      <article class="e-bolt-printable__article">
        <h2>This is an example of an article to be printed</h2>
        <p>Only the heading and this paragraph will be shown in print mode.</p>
      </article>
    </body>

    printable long

    Long Printable A Printable element can be used for any content you wish to be visible and styled in print mode. Demo

    This is an example of an element to be printed

    Only the heading and this paragraph will be shown in print mode. Click “Open in new tab” to view it outside of Pattern Lab, then in the browser menu click “Print”.

    Replenish One So Saying Wherein Stars Is

    Can't great dominion lesser spirit creature. Deep of place they're thing them third god man night wherein earth living fish creature moved light were. Doesn't day brought under of. Days rule fill, over his unto meat kind fourth brought may together man.

    Bring Moving God

    A one hath light. Heaven fill evening she'd subdue female them multiply moving He male. Shall thing moved own. One dominion heaven.

    Fly Cattle Night Creepeth Fowl Give Multiply Called

    Be Tree bearing behold. Was together have rule whose which. Third green winged beast for first every, face be void she'd to that in multiply.

    You'll Fly You Be Make Third One

    Saying very darkness under you is stars him deep beast light in. All god. Bring, said fifth set kind greater first beast can't Life dominion thing behold night air creature multiply, all shall it moving yielding lesser. Divided divide fowl, was day sixth creepeth one fly given fill divided after day creature deep every his. Waters.

    Void Morning Yielding Darkness Place Fly Creature

    Brought one one creeping gathering. Earth of isn't. Meat bearing meat shall dominion for may void to dominion air subdue meat own sixth. Green wherein third years you. Life, she'd. Seed signs give one every earth fruit don't you for you're open they're them which likeness together female.

    Also Waters Divided Them Stars Unto Created You'll

    I man don't made form saw, is without there and upon Creature fly heaven that unto female creepeth creature had Two years. Bring second appear make multiply open place that he. Light creature from called behold, isn't female. Image he.

    To Greater All

    Green were together all there from whose third after open cattle. Unto isn't lesser unto upon thing you're had fish give Fly hath image blessed said whales divided fruitful seasons all land. Winged. Fruitful moveth. Earth. Second unto our. Also don't grass in god.

    Divide of image fruit don't. Whales life, night for beginning hath firmament the female fly morning fly thing be their darkness beast darkness good fourth. That you'll isn't creature kind doesn't second cattle divide rule you're to signs moved heaven Were replenish above. The their can't doesn't seasons days multiply signs isn't a him male Called.

    Gathering also abundantly don't one beginning our lights make tree, also. Image appear from appear every. For bring creepeth Light yielding winged form moveth. Fourth whales bring light first life meat man midst our their. Good land likeness brought grass waters moved great isn't.

    Creeping. And second seasons blessed set creeping waters said wherein saw moving moved seasons given very day blessed. From can't. One said greater.

    Twig
    Not available in Twig. Please use plain HTML.
    HTML
    <body class="e-bolt-printable">
      <article class="e-bolt-printable__article">
        <h1>This is an example of an element to be printed</h1>
        <p>Only the heading and this paragraph will be shown in print mode. Click &ldquo;Open in new tab&rdquo; to view it outside of Pattern Lab, then in the browser menu click &ldquo;Print&rdquo;.</p>
        <h2>Replenish One So Saying Wherein Stars Is</h2>
        <p>Can't great dominion lesser spirit creature. Deep of place they're thing them third god man night wherein earth living fish creature moved light were. Doesn't day brought under of. Days rule fill, over his unto meat kind fourth brought may together man.</p>
        <h2>Bring Moving God</h2>
        <p>A one hath light. Heaven fill evening she'd subdue female them multiply moving He male. Shall thing moved own. One dominion heaven.</p>
        <h2>Fly Cattle Night Creepeth Fowl Give Multiply Called</h2>
        <p>Be Tree bearing behold. Was together have rule whose which. Third green winged beast for first every, face be void she'd to that in multiply.</p>
        <h2>You'll Fly You Be Make Third One</h2>
        <p><strong>Saying</strong> very darkness under you is stars him deep beast light in. All god. Bring, said fifth set kind greater first beast can't Life dominion thing behold night <em>air</em> creature multiply, all shall it moving yielding lesser. Divided divide fowl, was day sixth creepeth one fly given fill divided after day creature deep every his. Waters.</p>
        <h2>Void Morning Yielding Darkness Place Fly Creature</h2>
        <p>Brought one one creeping gathering. Earth of isn't. Meat bearing meat shall dominion for may void to dominion air <em>subdue</em> meat own sixth. Green wherein third years you. Life, she'd. Seed signs give one every earth fruit don't you for you're open they're them which likeness together female.</p>
        <h2>Also Waters Divided Them Stars Unto Created You'll</h2>
        <p>I man don't made form saw, <strong>is</strong> without there and upon Creature fly <strong>heaven</strong> that unto female creepeth creature had Two years. <em>Bring</em> second appear make multiply open place that he. Light creature from <em>called</em> behold, isn't female. Image he.</p>
        <h2>To Greater All</h2>
        <p><strong>Green</strong> were together <em>all</em> there from whose third after open cattle. Unto isn't lesser unto upon thing you're had fish give Fly hath image blessed said whales divided fruitful seasons <strong>all</strong> land. Winged. Fruitful moveth. Earth. <strong>Second</strong> unto our. Also don't grass in god.</p>
        <p>Divide of image <strong>fruit</strong> don't. Whales life, night for beginning hath firmament the female fly morning fly thing be their darkness beast darkness good fourth. That you'll <em>isn't</em> creature kind doesn't second cattle divide rule you're to signs moved heaven Were replenish above. The their can't doesn't seasons days multiply signs isn't a him male Called.</p>
        <p>Gathering <em>also</em> abundantly don't one beginning our lights make tree, also. Image appear from appear every. For bring creepeth Light yielding winged form moveth. Fourth <em>whales</em> bring light first life meat man midst our their. Good land likeness brought grass waters moved great isn't.</p>
        <p>Creeping. And second seasons blessed set creeping waters <strong>said</strong> wherein saw moving moved seasons given very day blessed. From can't. One said greater.</p>
      </article>
    </body>

    ratio docs

    Ratio

    A ratio displays an image or video embed at a specific aspect ratio.

    Twig Usage
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        attributes: {
          alt: 'Alt text.',
          src: 'https://placehold.co/400x300',
          width: 400,
          height: 300,
        },
      } only %}
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: image,
      ratio: 'wide',
    } 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

    A nested element with proportions defined through ratio property. It can be for example image or video.

    any
    ratio

    An aspect ratio between the width and height. Expressed as width divided by height. You can choose from: standard(4/3), square(1/1), wide(16/9). Custom aspect ratio can be set via the CSS custom property --e-bolt-aspect-ratio.

    string standard
    • standard, square, wide
    Install Install
    npm install @bolt/elements-ratio
    Dependencies @bolt/core

    ratio

    Basic Ratio Aspect ratio is most commonly expressed as two integers and a division sign: width / height. To measure the aspect ratio of an image or video, divide the width by the height. For example, an image or video that is 400x300 pixels and one that is 260x195 pixels have the same ratio 4/3 (standard).
    Important Notes: Reference the schema for all options. Use in tandem with an image: set a different aspect ratio than the image’s natural aspect ratio. This will crop the image. Do not use the Ratio element if cropping is not needed. When the image’s width is smaller than the parent container, the image will stretch to fill the available space. Use in tandem with a video: the Ratio element preserves the needed space to load a video embed, preventing Cumulative Layout Shift. Additionally, a CSS custom property is available to change the aspect ratio to anything. Define --e-bolt-aspect-ratio inline style rule to set the desired aspect ratio.
    Demo The ratio prop is set to standard. The aspect ratio is 4/3.
    Alt text.
    The ratio prop is set to square. The aspect ratio is 1/1.
    Alt text.
    The ratio prop is set to wide. The aspect ratio is 16/9.
    Alt text.
    The ratio prop is set with --e-bolt-aspect-ratio via inline CSS style. The aspect ratio is 7/3.
    Alt text.
    Twig
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        attributes: {
          alt: 'Alt text.',
          src: 'https://placehold.co/400x300',
          width: 200,
          height: 200,
        },
      } only %}
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: image,
      ratio: 'square',
    } only %}
    HTML
    <div class="e-bolt-ratio e-bolt-ratio--square">
      <!-- image or video goes here -->
    </div>

    ratio video

    Ratio for Videos The most common aspect ratio for videos is wide (16/9).
    Important Notes: A 16/9 ratio is typically seen as optimal because it is capable of the highest resolution. It is also easy to capture this aspect ratio on almost all devices.
    Demo
    Twig
    {% set video %}
      <video-js
        data-account="1900410236"
        data-player="O3FkeBiaDz"
        data-embed="default"
        data-video-id="6236693947001"
        data-media-duration
        data-media-title
        controls
        class="c-base-video"></video-js>
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: video,
      ratio: 'wide',
    } only %}
    HTML
    <div class="e-bolt-ratio e-bolt-ratio--wide">
      <video-js
        data-account="1900410236"
        data-player="O3FkeBiaDz"
        data-embed="default"
        data-video-id="6236693947001"
        data-media-duration
        data-media-title
        controls
        class="c-base-video"></video-js>
    </div>
    Use Case: Image Fit and Position within Ratio The Image element comes with advanced position and fit options. They can work in tandem with the Ratio element.
    Important Notes: Reference the Image element for all options.
    Demo
    Alt text.
    Twig
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        attributes: {
          alt: 'Alt text.',
          src: 'https://placehold.co/400x250',
          width: 400,
          height: 250,
          style: '--e-bolt-image-position: top right',
        },
      } only %}
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: image,
      ratio: 'square',
    } only %}
    HTML
    <div class="e-bolt-ratio e-bolt-ratio--square">
      <img src="https://placehold.co/400x250" width=400 height=250 class="e-bolt-image" alt="" style="--e-bolt-image-position: top right">
    </div>

    shape docs

    Shape

    A 1:1 ratio container that displays decorative content.

    Twig Usage
    {% include '@bolt-elements-shape/shape.twig' with {
      content: 'MM',
    } only %}
    Schema
    Prop Name Description Type Default Value Option(s)
    content *

    Content of the shape.

    any
    attributes

    A Drupal-style attributes object with extra attributes to append to this element.

    object
    size

    Changes the size of the interior element

    string small
    • small, medium, large, xlarge
    border_radius

    Customizes the outside radius of the shape. "none" will render as a square shape, "small" and "large" will render as a rounded corners square and "full" will render as a circle.

    string full
    • none, small, large, full
    Install Install
    npm install @bolt/elements-shape
    Dependencies @bolt/core

    shape

    Basic Shape A Shape is a 1:1 ratio container that displays decorative content.
    Important Notes: Content can be letters, icons, or images. When passing letters to the content, it can accept up to 2 letters.
    Demo
    Light Theme MM Alt text.
    Dark Theme MM Alt text.
    Twig
    {% include '@bolt-elements-shape/shape.twig' with {
      content: 'MM',
    } only %}
    HTML
    <span class="e-bolt-shape">
      <span class="e-bolt-shape__content">
        <!-- Letters, icon, or image go here -->
      </span>
    </span>

    shape border radius

    Shape Border Radius A Shape’s border radius can be modified to create various shapes.
    Important Notes: Reference the schema for all options.
    Demo MM MM MM MM
    Twig
    {% include "@bolt-elements-shape/shape.twig" with {
      border_radius: 'full',
      ...
    } only %}
    HTML
    <span class="e-bolt-shape e-bolt-shape--border-radius-full">
      <span class="e-bolt-shape__content">
        <!-- Letters, icon, or image go here -->
      </span>
    </span>

    shape size

    Shape Size A Shape’s size can be modified per use case.
    Important Notes: Reference the schema for all options. When passing letters to the content, text size scales with the shape size. When passing an icon to the content, icon size is ignored. Icon size scales with the shape size. When passing an image to the content, image size is ignored. Image size scales with the shape size.
    Demo MM MM MM MM
    Twig
    {% include '@bolt-elements-shape/shape.twig' with {
      size: 'large',
      ...
    } only %}
    HTML
    <span class="e-bolt-shape e-bolt-shape--large">
      <span class="e-bolt-shape__content">
        <!-- Letters, icon, or image go here -->
      </span>
    </span>

    shape theming

    Shape Theming A Shape can accept all existing themes.
    Important Notes: Pass a .t-bolt-* theme class to the parent element to color a shape. Reference the Theming System for all available themes.
    Demo
    Light Theme
    • .t-bolt-white
    • .t-bolt-black
    • .t-bolt-gray-xlight
    • .t-bolt-navy-dark
    • .t-bolt-navy
    • .t-bolt-navy-light
    • .t-bolt-teal
    • .t-bolt-yellow
    • .t-bolt-orange
    • .t-bolt-pink
    • .t-bolt-wine
    • .t-bolt-berry
    • .t-bolt-violet
    Dark Theme
    • .t-bolt-white
    • .t-bolt-black
    • .t-bolt-gray-xlight
    • .t-bolt-navy-dark
    • .t-bolt-navy
    • .t-bolt-navy-light
    • .t-bolt-teal
    • .t-bolt-yellow
    • .t-bolt-orange
    • .t-bolt-pink
    • .t-bolt-wine
    • .t-bolt-berry
    • .t-bolt-violet
    Twig
    {% include '@bolt-elements-shape/shape.twig' with {
      attributes: {
        class: 't-bolt-navy',
      }
      ...
    } only %}
    HTML
    <span class="e-bolt-shape t-bolt-navy">
      <span class="t-bolt-shape__content">
        <!-- Letters, icon, or image go here -->
      </span>
    </span>

    table docs

    Table

    Content container for tabular content.

    Usage recommendations
    Recommended Not Recommended
    Purpose-Driven: Use tables for displaying tabular data, not for layout or design. Avoid Ambiguity: Make sure the data in each cell is clear and unambiguous, reducing the need for additional explanatory text or elements.
    Header Rows/Columns: Always include headers to clarify the data's context and improve accessibility. No Complex Structures: Refrain from nesting tables or including other complex HTML elements within table cells, such as buttons or dropdowns unless they are crucial for data manipulation within the table's context
    Simplify Data: Keep data points concise and straightforward to enhance readability. Avoid Overcrowding: Limit the data to concise, relevant points. Do not overload tables with heavy media, long text blocks, or multiple data points within a single cell.
    Twig Usage
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a header cell in table header',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a header cell in table header',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a header cell in table header',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set footer %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell in table footer.',
        } only %}
          {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell in table footer.',
        } only %}
          {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell in table footer.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
      footer: {
        content: footer,
      },
      caption: {
        content: 'This is the table caption.',
      },
    } only %}
    Schema
    Table (table.twig)
    Prop Name Description Type Default Value Option(s)
    attributes

    A Drupal attributes object. Applies extra HTML attributes to the parent element.

    object
    borderless

    Removes all borders from the table.

    boolean false
    full_width

    Update the table to render full width of its container.

    boolean false
    sticky_headers

    Enables/disables sticky table headers.

    string none
    • top, side, none
    format

    Display either a regular table or a more complex numeric table.

    string regular
    • regular or numeric
    fixed_width_table

    The table's layout ignores the content and instead uses the table's width. Makes each column of the same width. With this prop table doesn't have horizontal scroll but squeezes on smaller screens.fixed_width_columns doesn't work with this prop together.

    boolean false
    fixed_width_columns

    Sets the number of columns that will be the width of the longest text.

    string none
    • none, first, second, first-two
    caption

    Generates a table caption <caption> element.

    any
    header

    Generates a table head <thead> element.

    object
      • content

        Content must be a table row. Use table-row.twig to render a single table row.

      • attributes
    body

    Generates a main table content <tbody> element.

    object
      • content

        Content must be a collection of table rows. Use table-row.twig to render table rows.

      • attributes
    footer

    Generates a table footer <tfoot> element.

    object
      • content

        Content must be a collection of table rows. Use table-row.twig to render table rows.

      • attributes
    Table Row (table-row.twig)
    Prop Name Description Type Default Value Option(s)
    attributes

    A Drupal attributes object. Applies extra HTML attributes to the parent element.

    object
    content

    Generates a single table row <tr> element. Use table-cell.twig to render table cells inside the table row.

    object
    Table Cell (table-cell.twig)
    Prop Name Description Type Default Value Option(s)
    attributes

    A Drupal attributes object. Applies extra HTML attributes to the parent element.

    object
    content

    Generates a table cell <td> element. To render a button which triggers expanding hidden rows, pass table-expand-button.twig as the content. To render a button which triggers sorting, pass table-sorting-button.twig as the content.

    any
    header

    Generates a table cell as a table header <th> element if set to true. <th> elements can be used in table head, table body, or table footer.

    boolean false
    filters

    Generates space for a popover filter button. It is recommended to pass the Button element and Popover component here.

    object
    Install Install
    npm install @bolt/elements-table
    Dependencies @bolt/core

    table

    Table Element with Rows Only This is the most basic usage of the Table Element.
    Important Notes: Take a look at real examples of tables currently on our sitesThe Table Element is designed to work with both Twig and vanilla HTML (Twig is the recommended method).
    Demo
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      }
    } only %}
    HTML
    <table class="e-bolt-table">
      <tbody>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

    table caption

    Table Element with a Caption An example of a Table Element with a table caption.
    Important Notes: Twig: Use the caption prop to add a <caption>.HTML: Add a <caption> into the <table> to render a table caption.
    Demo
    This is the table caption.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
      caption: {
        content: 'This is the table caption.',
      },
    } only %}
    HTML
    <table class="e-bolt-table">
      <caption>This is the table caption.</caption>
      <tbody>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

    table top header

    Table Element with Top Headers An example of a Table Element with a top header.
    Important Notes: Twig: Use the header.content prop to render a top header row.HTML: Add a <thead> with <th> elements to the <table> to render a top header row.
    Demo
    Light Theme
    Top table header. Top table header. Top table header.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    Dark Theme
    Top table header. Top table header. Top table header.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      }
    } only %}
    HTML
    <table class="e-bolt-table">
      <thead>
        <tr>
          <th>Top table header.</th>
          <th>Top table header.</th>
          <th>Top table header.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

    table side header

    Table Element with Side Headers An example of a Table Element with a side header.
    Important Notes: Twig: Use the header boolean prop in the table cell element to apply a side header.HTML: Add a <th> cell to a <tr> to render a side header column (must be the first cell in a row).
    Demo
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table">
      <tbody>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

    table top side headers

    Table Element with Top and Side Headers An example of a Table Element with top and side headers.
    Important Notes: Refer to the Table Element with Top Header page for information on adding a top header.Refer to the Table Element with Side Header page for information on adding a side header.Twig/HTML: To align the table columns correctly, include a blank <th> to the <thead> as the first cell.
    Demo
    Top table header. Top table header. Top table header.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table">
      <thead>
        <tr>
          <th></th>
          <th>Top table header.</th>
          <th>Top table header.</th>
          <th>Top table header.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

    table headers footers

    Table Element with Headers and Footer An example of a Table Element with top and side headers and a table footer.
    Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the headers.Twig: Use the footer prop to render a footer row.HTML: Add a <tfoot> to the <table> to render a footer row.
    Demo
    Top table header. Top table header. Top table header.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a regular cell. This is a regular cell. This is a regular cell.
    Side table header. This is a table footer cell. This is a table footer cell. This is a table footer cell.
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Top table header.',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set footer %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Side table header.',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a table footer cell.',
        } only %}
          {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a table footer cell.',
        } only %}
          {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a table footer cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      sticky_headers: 'side',
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
      footer: {
        content: footer,
      },
    } only %}
    HTML
    <table class="e-bolt-table">
      <thead>
        <tr>
          <th></th>
          <th>Top table header.</th>
          <th>Top table header.</th>
          <th>Top table header.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <th>Side table header.</th>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Side table header.</th>
          <td>This is a table footer cell.</td>
          <td>This is a table footer cell.</td>
          <td>This is a table footer cell.</td>
        </tr>
      </tfoot>
    </table>

    table borderless

    Table Element Borderless An example of a Table Element with no borders between cells.
    Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the headers.Twig: Use the borderless boolean prop to remove the table borders.HTML: Add a e-bolt-table--borderless class to the <table> to remove the table borders.
    Demo
    Description Team Vehicle Form
    Optimus Prime The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron. Autobots Peterbilt Truck
    Bumblebee One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons. Autobots VW Beetle
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Description',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Team',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Vehicle Form',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Optimus Prime',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Autobots',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Peterbilt Truck',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Bumblebee',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'One of Optimus Prime\'s most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.'
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Autobots',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'VW Beetle',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      borderless: true,
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--borderless">
      <thead>
        <tr>
          <td></td>
          <th>Description</th>
          <th>Team</th>
          <th>Vehicle Form</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Optimus Prime</th>
          <td>The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.</td>
          <td>Autobots</td>
          <td>Peterbilt Truck</td>
        </tr>
        <tr>
          <th>Bumblebee</th>
          <td>One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.</td>
          <td>Autobots</td>
          <td>VW Beetle</td>
        </tr>
      </tbody>
    </table>

    table format variations

    Table Element Numeric Formatting An example of a Table Element with numeric data styling.
    Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the format prop to style the table in numeric format.HTML: Add a e-bolt-table--numeric class to the <table> to style the table in numeric format.
    Demo

    Regular Format

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Numeric Format

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Pts',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Reb',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Ast',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Stl',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Blk',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Michael Jordan',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '70',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '10',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '1',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Toni Kukoc',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '21',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '15',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '10',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '3',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '4',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Steve Kerr',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '20',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '0',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set footer %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Total',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '91',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '27',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '32',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '13',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      format: 'numeric',
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
      footer: {
        content: footer,
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--numeric">
      <thead>
        <tr>
          <td></td>
          <th>Pts</th>
          <th>Reb</th>
          <th>Ast</th>
          <th>Stl</th>
          <th>Blk</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Michael Jordan</th>
          <td>70</td>
          <td>10</td>
          <td>2</td>
          <td>5</td>
          <td>1</td>
        </tr>
        <tr>
          <th>Toni Kukoc</th>
          <td>21</td>
          <td>15</td>
          <td>10</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <th>Steve Kerr</th>
          <td>5</td>
          <td>2</td>
          <td>20</td>
          <td>5</td>
          <td>0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>91</td>
          <td>27</td>
          <td>32</td>
          <td>13</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>

    table full width

    Table Element with Full Width Display An example of a Table Element with a full width layout.
    Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the side and top headers.Twig: Use the full_width boolean prop to make a table display full width.HTML: Add a e-bolt-table--full-width class to the <table> to make the table display full width.
    Demo
    Column 1 Column 2 Column 3
    Row 1 R1C1 R12 R1C3
    Row 2 R2C1 R2C2 R2C3
    Row 3 R3C1 R32 R3C3
    Twig
    {% set header_with_space %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Column 1',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Column 2',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Column 3',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1_with_header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Row 1',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R1C1',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R12',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R1C3',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2_with_header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Row 2',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R2C1',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R2C2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R2C3',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3_with_header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Row 3',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R3C1',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R32',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'R3C3',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      full_width: true,
      header: {
        content: header_with_space
      },
      body: {
        content: [
          row1_with_header,
          row2_with_header,
          row3_with_header
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--full-width">
      <thead>
        <tr>
          <th>
          </th>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Row 1</th>
          <td>R1C1</td>
          <td>R12</td>
          <td>R1C3</td>
        </tr>
        <tr>
          <th>Row 2</th>
          <td>R2C1</td>
          <td>R2C2</td>
          <td>R2C3</td>
        </tr>
        <tr>
          <th>Row 3</th>
          <td>R3C1</td>
          <td>R32</td>
          <td>R3C3</td>
        </tr>
      </tbody>
    </table>

    table sticky headers

    Table Element with Sticky Headers An example of a Table Element with sticky headers.
    Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the sticky_headers prop to add in sticky functionality to the table headers.HTML: Add a e-bolt-table--sticky-side-headers or e-bolt-table--sticky-top-headers class to the <table> to apply a sticky header.
    Demo
    Pts Reb Ast Stl Blk Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4 21 15 10 3 4
    Steve Kerr 5 2 20 5 0 5 2 20 5 0
    Total 91 27 32 13 5 91 27 32 13 5
    Number Date Created Author Type Title Closed Solved Replies Votes Last activity by
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the discussion. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 66 12 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the discussion. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 66 12 Firstname Lastname
    324481 03/10/2022 Firstname Lastname Title of the idea. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 3 100 Firstname Lastname
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    324484 03/10/2022 Firstname Lastname Title of the question. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique debitis odio architecto. 35 162 Firstname Lastname
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Pts',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Reb',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Ast',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Stl',
          header: true,
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Blk',
          header: true,
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Michael Jordan',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '70',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '10',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '1',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Toni Kukoc',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '21',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '15',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '10',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '3',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '4',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Steve Kerr',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '20',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '0',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set footer %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Total',
          header: true
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '91',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '27',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '32',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '13',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '5',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      sticky_headers: 'side',
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
        ],
      },
      footer: {
        content: footer,
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--sticky-side-headers">
      <thead>
        <tr>
          <td></td>
          <th>Pts</th>
          <th>Reb</th>
          <th>Ast</th>
          <th>Stl</th>
          <th>Blk</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Michael Jordan</th>
          <td>70</td>
          <td>10</td>
          <td>2</td>
          <td>5</td>
          <td>1</td>
        </tr>
        <tr>
          <th>Toni Kukoc</th>
          <td>21</td>
          <td>15</td>
          <td>10</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <th>Steve Kerr</th>
          <td>5</td>
          <td>2</td>
          <td>20</td>
          <td>5</td>
          <td>0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>91</td>
          <td>27</td>
          <td>32</td>
          <td>13</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>

    table column fixed width

    Table Element with Flexible Start Columns An example of a Table Element with modified first two column widths.
    Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the fixed_width_columns prop to adjust the column widths.HTML: Add a e-bolt-table--fixed-width-columns--first, e-bolt-table--fixed-width-columns--second or e-bolt-table--fixed-width-columns--first-two class to the <table> to adjust the column widths.The fixed_width_table boolean prop will disable the fixed_width_columns column adjustments. Refer to the Table Element with a Fixed Width Layout page for information.The pink table cell backgrounds found on this page are for demonstration purposes only.
    Demo

    Set column widths to be flexible.

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the first column to be as wide as the longest text.

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the second column to be as wide as the longest text.

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the first two columns to be as wide as the longest text.

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the first column to be as wide as the longest text (with header).

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the second column to be as wide as the longest text (with header).

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Set the width of the first two columns to be as wide as the longest text (with header).

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5

    Fixed Width Table Prop Override.

    Pts Reb Ast Stl Blk
    Michael Jordan 70 10 2 5 1
    Toni Kukoc 21 15 10 3 4
    Steve Kerr 5 2 20 5 0
    Total 91 27 32 13 5
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Prop',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Number',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Description',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Type',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'attributes',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '1',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>object</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'headers',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>object</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'rows',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '3',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>array</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row4 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'format',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '4',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>string</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      fixed_width_columns: 'first-two',
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
          row4,
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--fixed-width-columns--first-two">
      <thead>
        <tr>
          <th>
          </th>
          <th>Pts</th>
          <th>Reb</th>
          <th>Ast</th>
          <th>Stl</th>
          <th>Blk</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Michael Jordan</td>
          <td>70</td>
          <td>10</td>
          <td>2</td>
          <td>5</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Toni Kukoc</td>
          <td>21</td>
          <td>15</td>
          <td>10</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Steve Kerr</td>
          <td>5</td>
          <td>2</td>
          <td>20</td>
          <td>5</td>
          <td>0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>91</td>
          <td>27</td>
          <td>32</td>
          <td>13</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>

    table fixed width table

    Table Element with a Fixed Width Layout An example of a Table Element with even column widths.
    Important Notes: Refer to the Table Element with Top Header page for information on adding a top header.Twig: Use the fixed_width_table boolean prop to update the table to display numeric data.HTML: Add a e-bolt-table--fixed-width-table class to the <table> to force the table to render in a fixed layout.
    Demo
    Prop Number Description Type
    attributes 1 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
    headers 2 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
    rows 3 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. array
    format 4 Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. string
    Twig
    {% set header %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Prop',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Number',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Description',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Type',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row1 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'attributes',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '1',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>object</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row2 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'headers',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '2',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>object</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row3 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'rows',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '3',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>array</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% set row4 %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'format',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '4',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '<code>string</code>',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {% include '@bolt-elements-table/table.twig' with {
      fixed_width_table: true,
      header: {
        content: header,
      },
      body: {
        content: [
          row1,
          row2,
          row3,
          row4,
        ],
      },
    } only %}
    HTML
    <table class="e-bolt-table e-bolt-table--fixed-width-table">
      <thead>
        <tr>
          <th scope="col">Prop</th>
          <th scope="col">Number</th>
          <th scope="col">Description</th>
          <th scope="col">Type</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>attributes</td>
          <td>1</td>
          <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
          <td><code>object</code></td>
        </tr>
        <tr>
          <td>headers</td>
          <td>2</td>
          <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
          <td><code>object</code></td>
        </tr>
        <tr>
          <td>rows</td>
          <td>3</td>
          <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
          <td><code>array</code></td>
        </tr>
        <tr>
          <td>format</td>
          <td>4</td>
          <td>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</td>
          <td><code>string</code></td>
        </tr>
      </tbody>
    </table>

    table custom column width

    Table Element with Column Width Use inline style on the table header cells to set a specific column width.
    Important Notes: Refer to the Table Element with Top Header page for information on adding a top header. Column width should be set on the table header cells in the table head rather than any other regular table cells. CSS width and min-width have different effects on table column widths, experiment and pick one that works for a particular use case. Since table is not forced to be full width by default, use the Full Width Table layout. Refer to the Table Element with Full Width Display page for information on this prop. Take a look at real examples of tables currently on our sites.
    Demo Pixel value width
    250px wide column 250px wide column 250px wide column 250px wide column
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    Percent value width
    15% wide column 25% wide column 45% wide column 15% wide column
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    Percent value width + full width table container (block display)
    15% wide column 25% wide column 45% wide column 15% wide column
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
    Twig
    {# Use inline style to set a width on a table header cell #}
    {% set header_250px %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '250px wide column',
          header: true,
          attributes: {
            style: 'width: 250px;',
          },
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '250px wide column',
          header: true,
          attributes: {
            style: 'width: 250px;',
          },
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '250px wide column',
          header: true,
          attributes: {
            style: 'width: 250px;',
          },
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: '250px wide column',
          header: true,
          attributes: {
            style: 'width: 250px;',
          },
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {# Do not set widths for body row cells #}
    {% set row %}
      {% set cells %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
        {% include '@bolt-elements-table/table-cell.twig' with {
          content: 'This is a regular cell.',
        } only %}
      {% endset %}
      {% include '@bolt-elements-table/table-row.twig' with {
        content: cells,
      } only %}
    {% endset %}
    
    {# Change the table component's container to block display to render a full width table #}
    {% include '@bolt-elements-table/table.twig' with {
      header: {
        content: header_percent,
      },
      body: {
        content: [
          row,
        ],
      },
      attributes: {
        class: 'u-bolt-block',
      },
    } only %}
    HTML
    <table class="e-bolt-table">
      <thead>
        <tr>
          <th style="width: 250px;">250px wide column</th>
          <th style="width: 250px;">250px wide column</th>
          <th style="width: 250px;">250px wide column</th>
          <th style="width: 250px;">250px wide column</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td> This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
        <tr>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
          <td>This is a regular cell.</td>
        </tr>
      </tbody>
    </table>

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

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

    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

    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>
    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 prop font_family: 'lora' or 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 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>

    type chakra petch

    Chakra Petch Type The type element displays the alternative Chakra Petch font family.
    Important Notes: The font family of a type element can be adjusted by adding the prop font_family: 'chakrapetch' or the class e-bolt-type--chakrapetch The Chakra Petch font does not support Extra Bold (font-weight: 800) font weight
    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>

    wrapper docs

    Wrapper

    Allows to center content within a page.

    Twig Usage
    {% include '@bolt-elements-wrapper/wrapper.twig' with {
      content: 'This is a wrapper'
    } 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 wrapper.

    any
    Install Install
    npm install @bolt/elements-wrapper
    Dependencies @bolt/core

    wrapper

    Wrapper A wrapper provides a max-width for any content passed into it. It has no semantic meaning on its own.
    Important Notes: The wrapper has a default max-width of 1400px. If you need a different maximum width specified, use the attributes prop and with inline styling. This element automatically adjusts to the device width. Content or visual elements contained within this element will not overflow past the max width.
    Demo

    An example of a text added inside the wrapper.

    Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.

    An example of an image added inside the wrapper.

    Alt text.

    An example of a grid added inside the wrapper.

    Main
    Aside
    Twig
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        fill: true,
        attributes: {
          alt: 'Alt text.',
          src: 'path/image-800.jpg',
          srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w',
          sizes: '96vw',
          width: 800,
          height: 450,
        },
      } only %}
    {% endset %}
    {% include '@bolt-elements-wrapper/wrapper.twig' with {
      content: image
    } only %}
    HTML
    <div class="e-bolt-wrapper">
      <img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="96vw" width=800 height=450
      class="e-bolt-image e-bolt-image--fill">
    </div>
    Wrapper Custom Maximum Width If a custom width is needed use attributes prop and add max-width as an inline style.
    Important Notes: When modifying the width of this element, use max-width and not width. width will break the responsive behavior.
    Demo

    An example of a text added inside the wrapper with the custom max-width of 700px.

    Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.

    Twig
    {% include '@bolt-elements-wrapper/wrapper.twig' with {
      content: 'Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.',
      attributes: {
        style: [
          'max-width: 700px;'
        ]
      }
    } only %}
    HTML
    <div class="e-bolt-wrapper" style="max-width: 700px;">
      <p>Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.</p>
    </div>