List

Minimal list component for laying out a group of items.

Getting Started

Minimal list component for laying out a group of items. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-list

Usage

  {% include "@bolt-components-list/list.twig" with {
  display: "inline",
  spacing: "xsmall",
  align: "start",
  valign: "center",
  items: [
    "Item 1",
    include("@bolt-components-link/link.twig", {
      text: "Item 2",
      url: "#!",
    }),
    include("@bolt-components-chip/chip.twig", {
      text: "Item 3",
      url: "#!",
    }),
    include("@bolt-components-button/button.twig", {
      text: "Item 4",
      url: "#!",
      size: "small",
    }),
    "Item 5",
  ]
} only %}

Schema

Minimal list component for laying out a group of items.

Name Type Value(s) Description Default
attributes object

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

 N/A
items* array

All items can be simple text or items.

 N/A
tag string
  • ul, ol, div, span

Apply the semantic tag for the list.

 ul
display string
  • inline, block, inline@xxsmall, inline@xsmall, inline@small, inline@medium, flex

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.

 block
spacing string
  • none, xsmall, small, medium, large, xlarge

Control the spacing in between items.

 xsmall
separator string
  • none, solid, dashed

Display a separator in between items.

 none
inset boolean

Turn spacing to the inside of each item.

 false
align string
  • start, center, end

Control the horizontal alignment of items.

 start
valign string
  • start, center, end

Control the vertical alignment of items.

 center