2.10.0

List

List Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-list
Source code
View on Github
Dependencies
@bolt/core

Overview

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", "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 —
    • items

      Renderable content for a single list item.

        • content

          Use this prop for an iterable item such as an 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
  • true, false
align

Control the horizontal alignment of items.

 string start
  • start, center, end
valign

Control the vertical alignment of items.

 string center
  • start, center, end
Overview Usage Schema Edit this page Testing Steps