Bolt Design System

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`	—	—
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` or `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`	`true` or `false`

List

Published

Overview

Install via NPM

Usage

Schema