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

npm install @bolt/elements-article

Dependencies

@bolt/core

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.

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, super^script, sub_script.

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

First level ordered item
First level ordered item
- Second level unordered item
  1. Third level ordered item
  2. Third level ordered item
- Second level unordered item
First level ordered item

First level ordered item 1
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
        
        Sixth level ordered item 1
        
        Sixth level ordered item 2
        
        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
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.

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

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

npm install @bolt/elements-button

Dependencies

@bolt/core

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.

Demo

Light

Dark

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 as an <a> element

When appropriate, an <a> element can use the button style. For example, the button helps to navigate to another page.

Demo

This looks like a button but semantically is an anchor

Twig

{% include '@bolt-elements-button/button.twig' with {
  content: 'This looks like a button but semantically is an anchor',
  attributes: {
    href: 'https://google.com',
  }
} only %}

HTML

<a href="https://google.com" class="e-bolt-button">This looks like a button but semantically is an anchor</a>

HTML Attributes for Button

Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed.

Demo

This button has the "href", "target", "rel", and "id" attributes

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

Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. The icon component 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 and background props for the icon component are 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>

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

A button can be assigned to various levels of the content hierarchy based on the information architecture of the layout.

Demo

Light

Dark

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

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

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

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.

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>

Upload Button

The button classes can also be used on a file input.

Demo

Twig

HTML

<input id="unique-file-id" type="file" class="e-bolt-button e-bolt-button--small e-bolt-button--tertiary">

Button Background Color

Background color can be set on the button using background_color prop.

Demo

Light

Dark

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

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

Dark

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>

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-solid`, `add`, `agile`, `app-development`, `arrow-left`, `bar-chart-circle`, `bar-chart`, `bell-solid`, `bolt-logo-colored`, `briefcase`, `bullseye`, `calendar`, `certification`, `check-circle`, `check-solid`, `check`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `clock-circle`, `close-circle`, `close-solid`, `close`, `closed-caption`, `cloud`, `co-browse`, `collaboration`, `communications`, `copy-to-clipboard`, `credit-card`, `cube`, `customer-decision-hub`, `customer-onboarding`, `customer-service`, `data-integrations`, `documentation`, `dollar-circle`, `download`, `email`, `energy`, `entertainment`, `exclamation`, `external-link`, `eye-off`, `eye`, `face-happy`, `face-sad`, `facebook-solid`, `facebook`, `filter`, `financial`, `flag-solid`, `full-screen-off`, `full-screen-on`, `github`, `globe-circle`, `globe`, `government`, `grid`, `heart-solid`, `heart`, `hospitality`, `ideas`, `industries`, `info-circle`, `info-solid`, `insurance`, `integration`, `intelligent-virtual-assistant`, `interactive`, `java`, `knowledgebase`, `life-sciences`, `link`, `linkedin-solid`, `linkedin`, `list`, `lock-solid`, `lock`, `manufacturing`, `map-pin-solid`, `map-pin`, `media`, `menu`, `meteor`, `minus-circle`, `minus-solid`, `minus`, `mobility`, `molecule`, `more`, `omni-channel`, `orbit`, `partners`, `pega-announce`, `pega-book`, `pega-building-complex`, `pega-cart`, `pega-catalyst`, `pega-chat-question`, `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-pie-chart`, `pega-pin`, `pega-plane`, `pega-process-ai`, `pega-process-fabric`, `pega-process-mining`, `pega-send-submit`, `pega-setting`, `pega-shuffle`, `pega-subtitle`, `pega-tag`, `pega-thumbs-up`, `pega-timer`, `pega-wifi`, `pencil`, `picture`, `platform`, `podcast`, `presentation`, `print`, `product-delivery`, `refresh`, `reply`, `reporting`, `retail`, `ribbon`, `robo-auto`, `rocket`, `sales-automation`, `scalability`, `search`, `share`, `speed-dial`, `star-solid`, `support`, `system-admin`, `text-align-left`, `transportation`, `trash`, `triangle`, `truck`, `twitter-solid`, `twitter`, `unlock`, `upload`, `user-interface`, `user`, `video`, `warning`, `watch`, `workforce-intelligence`, `x`, `youtube-solid`
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

npm install @bolt/elements-icon

Dependencies

@bolt/core

svgson

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

Brand Icons

pega-announce

pega-book

pega-building-complex

pega-cart

pega-catalyst

pega-chat-question

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

pega-pin

pega-plane

pega-process-ai

pega-process-fabric

pega-process-mining

pega-send-submit

pega-setting

pega-shuffle

pega-subtitle

pega-tag

pega-thumbs-up

pega-timer

pega-wifi

Other Icons

add-circle

add-solid

add

agile

app-development

arrow-left

bar-chart-circle

bar-chart

bell-solid

bolt-logo-colored

briefcase

bullseye

calendar

certification

check-circle

check-solid

check

chevron-down

chevron-left

chevron-right

chevron-up

clock-circle

close-circle

close-solid

close

closed-caption

cloud

co-browse

collaboration

communications

copy-to-clipboard

credit-card

cube

customer-decision-hub

customer-onboarding

customer-service

data-integrations

documentation

dollar-circle

download

email

energy

entertainment

exclamation

external-link

eye-off

eye

face-happy

face-sad

facebook-solid

facebook

filter

financial

flag-solid

full-screen-off

full-screen-on

github

globe-circle

globe

government

grid

heart-solid

heart

hospitality

ideas

industries

info-circle

info-solid

insurance

integration

intelligent-virtual-assistant

interactive

java

knowledgebase

life-sciences

link

linkedin-solid

list

lock-solid

lock

manufacturing

map-pin-solid

map-pin

media

menu

meteor

minus-circle

minus-solid

minus

mobility

molecule

more

omni-channel

orbit

partners

pencil

picture

platform

podcast

presentation

print

product-delivery

refresh

reply

reporting

retail

ribbon

robo-auto

rocket

sales-automation

scalability

search

share

speed-dial

star-solid

support

system-admin

text-align-left

transportation

trash

triangle

truck

twitter-solid

twitter

unlock

upload

user-interface

user

video

warning

watch

workforce-intelligence

x

youtube-solid

Dark

Brand Icons

pega-announce

pega-book

pega-building-complex

pega-cart

pega-catalyst

pega-chat-question

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

pega-pin

pega-plane

pega-process-ai

pega-process-fabric

pega-process-mining

pega-send-submit

pega-setting

pega-shuffle

pega-subtitle

pega-tag

pega-thumbs-up

pega-timer

pega-wifi

Other Icons

add-circle

add-solid

add

agile

app-development

arrow-left

bar-chart-circle

bar-chart

bell-solid

bolt-logo-colored

briefcase

bullseye

calendar

certification

check-circle

check-solid

check

chevron-down

chevron-left

chevron-right

chevron-up

clock-circle

close-circle

close-solid

close

closed-caption

cloud

co-browse

collaboration

communications

copy-to-clipboard

credit-card

cube

customer-decision-hub

customer-onboarding

customer-service

data-integrations

documentation

dollar-circle

download

email

energy

entertainment

exclamation

external-link

eye-off

eye

face-happy

face-sad

facebook-solid

facebook

filter

financial

flag-solid

full-screen-off

full-screen-on

github

globe-circle

globe

government

grid

heart-solid

heart

hospitality

ideas

industries

info-circle

info-solid

insurance

integration

intelligent-virtual-assistant

interactive

java

knowledgebase

life-sciences

link

linkedin-solid

list

lock-solid

lock

manufacturing

map-pin-solid

map-pin

media

menu

meteor

minus-circle

minus-solid

minus

mobility

molecule

more

omni-channel

orbit

partners

pencil

picture

platform

podcast

presentation

print

product-delivery

refresh

reply

reporting

retail

ribbon

robo-auto

rocket

sales-automation

scalability

search

share

speed-dial

star-solid

support

system-admin

text-align-left

transportation

trash

triangle

truck

twitter-solid

twitter

unlock

upload

user-interface

user

video

warning

watch

workforce-intelligence

x

youtube-solid

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

A Icon’s size can be modified per use case.

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

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

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 #151619.

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

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

npm install @bolt/elements-image

Dependencies

@bolt/core

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

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

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

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

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.

Demo

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

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>

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

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

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.	`string`	`ul`	`ul` or `ol`
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

npm install @bolt/elements-list

Dependencies

@bolt/core

Basic List

The List element represents a list of items.

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

Choose between ul and ol tags when creating a List.

Demo

UL

Item
Item
Item

OL

Item 1
Item 2
Item 3

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

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 with No Wrapping

Prevent List Items from wrapping with the nowrap prop.

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

Modify the space between List Items.

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

List Items can be separated by a horizontal or vertical line. The separator style can be solid or dashed.

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 with Inset Spacing

Add inset spacing to 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 with Horizontal Alignment

Adjust the horizontal alignment of List Items.

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 with Vertical Alignment

Adjust the vertical alignment of List Items.

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

The List element represents a list of items.

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.

Code of Conduct
Reporting Accounting Control Concerns
Related Person Transaction Policy
Audit Committee

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>

Printable

An media container that styles children HTML elements for print.

Install

npm install @bolt/elements-printable

Dependencies

@bolt/core

Basic 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”.

Twig

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>

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

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

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://via.placeholder.com/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

npm install @bolt/elements-ratio

Dependencies

@bolt/core

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.

The ratio prop is set to square. The aspect ratio is 1/1.

The ratio prop is set to wide. The aspect ratio is 16/9.

The ratio prop is set with --e-bolt-aspect-ratio via inline CSS style. The aspect ratio is 7/3.

Twig

{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'https://via.placeholder.com/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 for Videos

The most common aspect ratio for videos is wide (16/9).

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.

Demo

Twig

{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'https://via.placeholder.com/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://via.placeholder.com/400x250" width=400 height=250 class="e-bolt-image" alt="" style="--e-bolt-image-position: top right">
</div>

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

npm install @bolt/elements-shape

Dependencies

@bolt/core

Basic Shape

A Shape is a 1:1 ratio container that displays decorative content.

Demo

Light

MM

Dark

MM

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

A Shape’s border radius can be modified to create various shapes.

Demo

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

A Shape’s size can be modified per use case.

Demo

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

A Shape can accept all existing themes.

Demo

Light

.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

.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

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

npm install @bolt/elements-table

Dependencies

@bolt/core

Table Element with Rows Only

This is the most basic usage of the Table Element.

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 Element with a Caption

An example of a Table Element with 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 Element with Top Headers

An example of a Table Element with a top header.

Demo

Light

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

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 Element with Side Headers

An example of a Table Element with a side header.

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 Element with Top and Side Headers

An example of a Table Element with top and side headers.

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 Element with Headers and Footer

An example of a Table Element with top and side headers and a table footer.

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

An example of a Table Element with no borders between cells.

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 Element Numeric Formatting

An example of a Table Element with numeric data styling.

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 Element with Full Width Display

An example of a Table Element with a full width layout.

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 Element with Sticky Headers

An example of a Table Element with sticky headers.

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	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 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 Element with a Fixed Width Layout

An example of a Table Element with even column widths.

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

Text Link

Underlined text that indicates interactivity.

Usage recommendations

Recommended	Not Recommended
Context Matters: Make sure the link text describes its destination or purpose clearly. Vague text like "Click here" should be avoided.	No JS Triggers: Do not use links for triggering JavaScript actions like opening modals; it's semantically incorrect. Use buttons or other appropriate elements for such interactions.
Local vs External: Clearly distinguish between links that lead to other parts of the same website and those that lead to external sites.	Avoid Surprises: Ensure the link does what it promises. Don't direct users to unrelated content or make them download a file without a clear indication.
Progressive Disclosure: Use links to guide the user to more detailed information, effectively organizing content without overwhelming them.	Don't Overlink: Avoid turning every other word in a paragraph into a hyperlink. It makes the text difficult to read and diminishes the impact of your links.

Twig Usage

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a text link',
  attributes: {
    href: 'https://google.com'
  }
} 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 text link.	`any`	—	—
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`	—	—
reversed_underline	Set the underline style to appear on hover instead of being always visible.	`boolean`	`false`	—
expand_click_target	Expand the click target to cover up the entire area of its closest container that is not positioned static.	`boolean`	`false`	—

Install

npm install @bolt/elements-text-link

Dependencies

@bolt/core

@bolt/elements-icon

Basic Text Link

A text link is generally an inline interactive element that is styled as underlined text. Its main purpose is to help the user navigate (sometimes perform a function). Both <a class="e-bolt-text-link"> and <a> are acceptable at rendering a text link, though the Twig template is the recommended usage for Drupal.

Demo

Light

Click me to go to google.com

Dark

Click me to go to google.com

Twig

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'Click me to go to google.com',
  attributes: {
    href: 'https://google.com',
    target: '_blank',
    rel: 'noopener'
  }
} only %}

HTML

<a href="https://google.com" target="_blank" rel="noopener" class="e-bolt-text-link">Click me to go to google.com</a>

Text Link as a <button> Element

When appropriate, a <button> element can use the text link style. For example, the text link performs a function such as opening a modal or popover.

Demo

Twig

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This looks like a text link but semantically is a reset button',
  attributes: {
    type: 'reset',
  }
} only %}

HTML

<button type="reset" class="e-bolt-text-link">This looks like a text link but semantically is a reset button</button>

HTML Attributes for Text Link

Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed.

Demo

This text link has the "href", "target", "rel" and "id" attributes

Twig

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This text link has the "href", "target", "rel" 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-text-link">This text link has the "href", "target", "rel" and "id" attributes</a>

Text Link with Icon

Icons can be used in tandem with a text link. An icon can be placed before and/or after the text. The icon component 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 and background props for the icon component are not well supported in this scenario.

When writing in plain HTML, all white space must be eliminated to have the text underline and icon display correctly. 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-text-link__icon-before"> and <span class="e-bolt-text-link__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

This is a text link with icons before and after

This is a text link with an icon before

This is a text link with an icon after

Twig

{% 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 %}

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a text link with icons before and after',
  icon_before: icon_custom,
  icon_after: icon_chevron_down,
  attributes: {
    href: 'https://google.com',
  }
} only %}

HTML

<a href="https://google.com" class="e-bolt-text-link"><span class="e-bolt-text-link__icon-before"><!-- Icon or image markup --></span>This is a text link with icons before and after<span class="e-bolt-text-link__icon-after"><!-- Icon or image markup --></span></a>

Reversed Underline Text Link

Text link has a style variant called reversed underline. This is commonly used in headlines with icons because an icon may already indicate interactivity, reducing the need for the underline. The underline will appear on hover instead of being visible always.

Demo

This is a reversed underline headline text link

This is a reversed underline body text link

Twig

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a reversed underline text link',
  icon_after: icon_chevron_right,
  reversed_underline: true,
  attributes: {
    href: 'https://google.com',
  }
} only %}

HTML

<a href="https://google.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">This is a reversed underline text link</a>

Expand Click Target

The text link will increase its click target to cover a particular block of content.

Important Notes:

When creating a block text link (such as trying to make an entire card clickable while retaining the headline as the link) with the expand_click_target prop, the text link must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky), and the text must explain clearly the block of content that it’s trying to cover.

Only 1 block text link should be used within a particular block of content.

Demo

This is a block text link, its click target will cover the entire area of its closest container that is not positioned static

Hover over this box, the whole thing is clickable.

Twig

// Wrap this text link with a container that is not positioned static.
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.',
  expand_click_target: true,
  attributes: {
    href: 'https://google.com',
  }
} only %}

HTML

// Wrap this text link with a container that is not positioned static.
<a href="https://google.com" class="e-bolt-text-link e-bolt-text-link--expand-click-target">This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.</a>

Type

Pega branded typography.

Twig Usage

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element.'
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this element.	`object`	—	—
content	Content of the type element.	`any`	—	—
tag	Set the semantic tag for the type element. Use `span` for inline text; use `p`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `div` for block text. There is no restrictions with this prop, developers must understand semantic HTML to apply the appropriate tag based on the use case.	`string`	`p`	—
font_family	Choose the font family. Defaults to Open Sans	`string`	`opensans`	`opensans` or `lora`
size	Control the font-size. If size is not defined or set to auto, font-size inherits from parent container.	`string`	`auto`	`auto`, `tiny`, `xsmall`, `small`, `regular`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`, `display`, `largedisplay`
color	Control the PEGA brand color.	`string`	—	`navy`, `teal`, `orange`, `yellow`, `wine`, `pink`, `berry`, `gray`, `black`, `white`
weight	Alter the weight of the text.	`string`	`regular`	`extrabold`, `bold`, `semibold`, `regular`, `light`
hierarchy	Control the hierarch of text. Each option comes with specific typographic styles.	`string`	`body`	`body`, `headline`, `subheadline`, `eyebrow`
icon_before	Append an icon before the text. Icon element is recommended. However, <img> elements are also acceptable.	`any`	—	—
icon_after	Append an icon after the text. Icon element is recommended. However, <img> elements are also acceptable.	`any`	—	—

Install

npm install @bolt/elements-type

Dependencies

@bolt/core

Basic Type

The type element displays text in Pega branded typographic styles.

Demo

This is a type element. Use common inline HTML elements to emphasize, bold, link, and more.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element. Use common inline HTML elements to <em>emphasize</em>, <strong>bold</strong>, <a href="#!">link</a>, and more.'
} only %}
<p>If no props are set, the above is exactly the same as a <p> HTML element.</p>

HTML

<p class="e-bolt-type">This is a type element. Use common inline HTML elements to <em>emphasize</em>, <strong>bold</strong>, <a href="#!">link</a>, and more.</p>
<p>If no props are set, the above is exactly the same as a <p> HTML element.</p>

Type Tag

Tag defines the semantic tag of the type element.

Important Notes:

When semantics is independent of visual styles, the flexibility allows content authors to create all kinds of text layout. The tag prop only controls semantics, no visual styles are being defined.

Use <span> for inline text. Inline text can be nested inside another type element.

Use <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, or <div> for block text.

General HTML rules apply here, do not nest block text inside inline text or another block text unless it is a generic <div>.

Demo

This type element is a level 4 heading. No styles are defined so this looks like plain text.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This type element is a level 4 heading. No styles are defined so this looks like plain text.'
  tag: 'h4',
} only %}

HTML

<h4 class="e-bolt-type">This type element is a level 4 heading. No styles are defined so this looks like plain text.</h4>

Type Size

Size defines the font-size of the type element.

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 Weight

Weight defines the font-weight of the type element.

Demo

This font-weight is extrabold.

This font-weight is bold.

This font-weight is semibold.

This font-weight is regular.

This font-weight is light.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is font-weight extrabold.'
  weight: 'extrabold',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--weight-extrabold">This font-weight is extrabold.</p>

Type Color

Color defines the color of the type element.

Demo

Light

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Dark

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is teal color.'
  color: 'teal',
} only %}

HTML

<p class="e-bolt-type e-bolt-type--color-teal">This color is teal.</p>

Type Hierarchy

Hierarchy defines specific recipes of typographic styles that create visual hierarchy amongst type elements.

Important Notes:

As mentioned before, tag controls semantics while hierarchy controls visual styles.

Using bold text is not the same as using headline hierarchy. Headline, subheadline, and eyebrow have specific typographic styles—color, spacing, and font—that differentiate them from basic text.

Using <strong> in tandem with subheadline hierarchy will create the same styles as headline hierarchy. This flexibility allows content authors to create mixed-weight headlines.

Eyebrow has one size only, because its main purpose is to be short complimentary info above the headline. Due to eyebrow text set to uppercase by design, it is recommended to set aria-label with the proper case to improve accessibility.

When setting size and hierarchy for a particular pair of headline and subheadline (or body text), make sure to set the headline at least one size larger than subheadline to create the visual hierarchy.

Demo

Teaser Text Group

Eyebrow

Headline (size xxxlarge and h1)

Subheadline (size xlarge and h2)

Body text (basic type element).

Mixed-weight Headlines

This entire sentence is a subheadline but part of it is bold

Headlines

This is size auto headline

This is size tiny headline

This is size xsmall headline

This is size small headline

This is size regular headline

This is size medium headline

This is size large headline

This is size xlarge headline

This is size xxlarge headline

This is size xxxlarge headline

This is size display headline

This is size largedisplay headline

Subheadlines

This is size auto subheadline

This is size tiny subheadline

This is size xsmall subheadline

This is size small subheadline

This is size regular subheadline

This is size medium subheadline

This is size large subheadline

This is size xlarge subheadline

This is size xxlarge subheadline

This is size xxxlarge subheadline

This is size display subheadline

This is size largedisplay subheadline

Eyebrow

This is an eyebrow

Body

This is size auto body text

This is size tiny body text

This is size xsmall body text

This is size small body text

This is size regular body text

This is size medium body text

This is size large body text

This is size xlarge body text

This is size xxlarge body text

This is size xxxlarge body text

This is size display body text

This is size largedisplay body text

Twig

{# Teaser Text Group #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow',
  hierarchy: 'eyebrow',
  attributes: {
    'aria-label': 'Eyebrow',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline (size xxxlarge and h1)',
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline (size xlarge and h2)',
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Paragraph (basic type element).',
} only %}

{# Mixed-weight Headlines #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This entire sentence is a subheadline <strong>but part of it is bold</strong>',
  hierarchy: 'subheadline',
  tag: 'h1',
  size: 'xxxlarge',
} only %}

HTML

<!-- Teaser Text Group -->
<p class="e-bolt-type e-bolt-type--eyebrow" aria-label="Eyebrow">
  Eyebrow
</p>
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge">
  Headline (size xxxlarge and h1)
</h1>
<h2 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--xlarge">
  Subheadline (size xlarge and h2)
</h2>
<p class="e-bolt-type">
  Paragraph (basic type element).
</p>

<!-- Mixed-weight Headlines -->
<h1 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--size-xxxlarge">
  This entire sentence is a subheadline <strong>but part of it is bold</strong>
</h1>

Type with Icon

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>

Headline Links

Link styles for headline, subheadline, and eyebrow.

Important Notes:

Turn headline, subheadline, and eyebrow into links by passing proper HTML attributes via link_attributes. Same as Text Link element, depending on if the <a> or the <button> HTML element is being used, the proper HTML attributes should be passed.

Headline, subheadline, and eyebrow links created this way will utilize the reversed underline style from the Text Link element, icon is recommended to be used as a visual cue while underline is not visible. The twig template has reversed underline on by default, however, when writing plain HTML, this style needs to be written out manually using appropriate Text Link modifier classes.

link_attributes will turn the entire paragraph of text into a link, so it is not recommended for body text links. Instead, use the Text Link element or <a> HTML element for inline links within a paragraph of text.

Demo

Block Link

Eyebrow link

Headline link

Subheadline link

Inline Link

This is a paragraph of text. In the middle of it, it has an inline link. This inline link can be a Text Link element or an HTML anchor element.

Twig

{% set icon_chevron_right %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'chevron-right',
  } only %}
{% endset %}

{# Block Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow link',
  hierarchy: 'eyebrow',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline link',
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline link',
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}

{# Inline Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has <a href="#!">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.',
} only %}

HTML

<!-- Block Link -->
<h1 class="e-bolt-type e-bolt-type--size-xxxlarge e-bolt-type--headline"><a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">Headline link<span class="e-bolt-text-link__icon-after"><!-- Icon or image markup --></span></a></h1>

<!-- Inline Link -->
<p class="e-bolt-type">This is a paragraph of text. In the middle of it, it has <a href="#!" class="e-bolt-text-link">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.</p>

Use Case: Numbered Headlines

Combine the List component, Shape element, and Type element to create numbered headlines.

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>

Lora Type

The type element displays the alternative Lora font family.

Demo

Lora/Open Sans Comparison.

This is a type headline with the Open Sans.

This is a type headline with the Lora.

Lora Weights and Styles.

This Lora font is bold.

This Lora font is bold and italicized.

This Lora font is semibold.

This Lora font is semibold and italicized.

This Lora font is regular.

This Lora font is regular and italicized.

Twig

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element with the Lora font family.',
  attributes: {
    'class': 'e-bolt-type--lora'
  }
} only %}

HTML

<p class="e-bolt-type e-bolt-type--lora">This is a type element with the Lora font family.</p>

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

npm install @bolt/elements-wrapper

Dependencies

@bolt/core

Wrapper

A wrapper provides a max-width for any content passed into it. It has no semantic meaning on its own.

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.

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.

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>

article docs Show Code Hide Code

Article

An editorial container that styles children HTML elements.

article Show Code Hide Code

H1 heading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text

H6 heading text

button docs Show Code Hide Code

Button

A graphical element that indicates interactivity.

button Show Code Hide Code

button link Show Code Hide Code

button attributes Show Code Hide Code

button with icon Show Code Hide Code

button with icon only Show Code Hide Code

button hierarchy Show Code Hide Code

button size Show Code Hide Code

button border radius Show Code Hide Code

button display Show Code Hide Code

button upload Show Code Hide Code

button background color Show Code Hide Code

button loading state Show Code Hide Code

icon docs Show Code Hide Code

Icon

Inline SVG icon system.

icon Show Code Hide Code

icon size Show Code Hide Code

icon color Show Code Hide Code

icon use case custom svg Show Code Hide Code

icon javascript usage Show Code Hide Code

image docs Show Code Hide Code

Image

A responsive image embed.

image Show Code Hide Code

image srcset and sizes Show Code Hide Code

image fill Show Code Hide Code

image background Show Code Hide Code

image use case background fit and position Show Code Hide Code

image use case art direction Show Code Hide Code

list docs Show Code Hide Code

List

Semantic list for displaying a group of items.

list Show Code Hide Code

list tag Show Code Hide Code

UL

OL

list display Show Code Hide Code

Vertical List Items are full-width.

Horizontal List Items wrap and are only content-width.

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

list nowrap Show Code Hide Code

Horizontal list with nowrap

list spacing Show Code Hide Code

Vertical list with spacing (none)

Vertical list with spacing (xxsmall)

Vertical list with spacing (xsmall)

Vertical list with spacing (small)

Vertical list with spacing (medium)

Vertical list with spacing (large)

Vertical list with spacing (xlarge)

Horizontal list with spacing (none)

Horizontal list with spacing (xxsmall)

Horizontal list with spacing (xsmall)

Horizontal list with spacing (small)

Horizontal list with spacing (medium)

Horizontal list with spacing (large)

Horizontal list with spacing (xlarge)

list separator Show Code Hide Code

Solid separators in a vertical list

Solid separators in a horizontal list

Solid separators in a horizontal@medium list

Dashed separators in a vertical list

Dashed separators in a horizontal list

Dashed separators in a horizontal@medium list

list inset Show Code Hide Code

Regular spacing in a vertical list

Inset spacing in a vertical list

article docs

article

button docs

button

button link

button attributes

button with icon

button with icon only

button hierarchy

button size

button border radius

button display

button upload

button background color

button loading state

icon docs

icon

icon size

icon color

icon use case custom svg

icon javascript usage

image docs

image

image srcset and sizes

image fill

image background

image use case background fit and position

image use case art direction

list docs

list

list tag

list display

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

list nowrap

list spacing

list separator

list inset

list align

list valign

list use cases

printable docs

printable

printable long

ratio docs

ratio

ratio video

ratio use case fit and position

shape docs

shape

shape border radius

shape size

shape theming

table docs

table

table caption

table top header

table side header