List

Minimal layout container for displaying a group of items.

Published Last updated: 5.0.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-list/list.twig' with {
  display: 'inline',
  spacing: 'xsmall',
  align: 'start',
  valign: 'center',
  items: [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
items

Generates an array of items, each can contain renderable content (i.e. a string, render array, or included pattern).

array
tag

Apply the semantic tag for the list.

string ul
  • ul, ol, div, span
display

Display either an inline list of items or a block (stacked) list of items. Responsive options are also available for transforming from block to inline at specific breakpoints.

string block
  • block, flex, inline, inline@xxsmall, inline@xsmall, inline@small, inline@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
inset

Turn spacing to the inside of each item.

boolean false
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
nowrap

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

boolean false
Install Install
npm install @bolt/components-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue wc-context