list docs

List

Semantic list for displaying a group of items.

Published Last updated: 5.8.0 Change log Github NPM
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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 Install 
npm install @bolt/elements-list
Dependencies @bolt/core-v3.x

list

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

{% set placeholder_2 %}
  {% include '@bolt-components-placeholder/placeholder.twig' with {
    text: 'Item 2',
    size: 'xsmall',
  } only %}
{% endset %}

{% set placeholder_3 %}
  {% include '@bolt-components-placeholder/placeholder.twig' with {
    text: 'Item 3',
    size: 'xsmall',
  } only %}
{% endset %}

{% 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 {
  content: list_items
} only %}
HTML
<ul class="e-bolt-list">
  <li class="e-bolt-list__item">Item 1</li>
  <li class="e-bolt-list__item">Item 2</li>
  <li class="e-bolt-list__item">Item 3</li>
</ul>

list tag

List Tag Choose between ul and ol tags when creating a List. Important Notes: The ul tag is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. On the other hand, with the ol tag, the order is meaningful. Demo

UL

  • Item
  • Item
  • Item

OL

  1. Item 1
  2. Item 2
  3. 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 {
  tag: 'ol',
  content: list_items
} only %}
HTML
<ol class="e-bolt-list">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ol>

list display

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

Vertical List Items are full-width.

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

Horizontal List Items wrap and are only content-width.

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

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

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

list nowrap

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

Horizontal list with nowrap

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

list spacing

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

Vertical list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Vertical list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Horizontal list with spacing (xlarge)

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

list separator

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

Solid separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a vertical list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a horizontal@medium list

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

list inset

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

Regular spacing in a vertical list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a vertical list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a horizontal list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a horizontal@medium list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a horizontal@medium list

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

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

list align

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

Horizontally align horizontal content: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal content: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align horizontal@medium content: justify

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

list valign

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

Vertically align horizontal content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: end

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: end

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

list use cases

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

What we do

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

Governance

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

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