2.18.0

Unordered List

Unordered List Component in Bolt

Published

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

Overview

Stylistic bulleted list for article content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-ul

Usage

  {% include "@bolt-components-ul/ul.twig" with {
  "items": [
    "Do not include any data or information in your posts that are confidential!",
    "Apply basic practices for collaborative work.",
    include("@bolt-components-link/link.twig", {
      text: "Be honest, respectful, trustworthy and helpful.",
      url: "#!",
    }),
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} 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 —
  • —
ContentItems

Use the items prop instead.

 array —
  • [items]:
    • Type: object

      A single list item object with either a text or contentItems key

    • Properties:
      • text

        Item text

        • Type: string
      • contentItems

        Items pass to @bolt/text.twig

        • Type: array
Items

All items can be simple text or items.

 array —
  • [items]:
    • Type: string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single list item.
Debug Panel