ul docs

Unordered List

Getting Started

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

Name Type Value(s) Description Default
attributes object

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

 N/A
contentItems 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

DEPRECATED

Use the items prop instead.

 N/A
items array

All items can be simple text or items.

 N/A

ul

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul theme variation

Theme: xlight

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul nested items

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Level 1
    • Item 1
    • Level 2
      • Item 1
      • Item 2
      • Level 3
        • Item 1
        • Item 2
        • Item 3
        • Level 4
          • Item 1
          • Item 2
          • Item 3
          • Item 4
          • Level 5
            • Item 1
            • Item 2
            • Item 3
            • Item 4
            • Item 5
          • Item 5
        • Item 5
      • Item 4
      • Item 5
    • Item 3
    • Item 4
    • Item 5
  • Avoid cluttering discussions with noise.

ul with web component

Web Component Usage

Bolt Unordered List is a web component, you can simply use <bolt-ul> in the markup to make it render. Its inner content is comprised of <bolt-li>.

Example

<bolt-ul>
  <bolt-li>Item 1</bolt-li>
  <bolt-li>Item 2</bolt-li>
  <bolt-li>Item 3</bolt-li>
  <bolt-li>Item 4</bolt-li>
  <bolt-li>Item 5</bolt-li>
</bolt-ul>

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

Coffee Tea Black tea Green tea Good tea Great tea Is the best Milk L1 - Tea L1 - Coffee L2 - Light roast L2 - Dark roast L3 - Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.Answer questions authoritatively and concisely. Avoid cluttering discussions with noise. L4 - Tea L4 - Coffee L5 - Light roast L5 - Dark roast L6 - Italian Roast L6 - Coffee from Italy L5 - Medium roast L4 - Milk L3 - Coffee from Italy L2 - Medium roast L1 - Milk Level 1 - Item 1 Level 1 - Item 2 Level 1 - Item 3 Level 1 - Item 4 Level 2 - Item 1 Level 2 - Item 2 Level 2 - Item 3 Level 3 - Item 1 Level 3 - Item 2 Level 4 - Item 1 Level 5 - Item 1 Level 5 - Item 2 Level 5 - Item 3 Level 5 - Item 4 Level 5 - Item 5 Level 4 - Item 2 Level 4 - Item 3 Level 4 - Item 4 Level 4 - Item 5 Level 3 - Item 3 Level 3 - Item 4 Level 3 - Item 5 Level 2 - Item 4 Level 2 - Item 5 Level 1 - Item 5 Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Milk

Theme variations

Theme: xlight

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: light

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: dark

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: xdark

Item 1 Item 2 Item 3 Item 4 Item 5