ol docs

Ordered List

Getting Started

Stylistic numbered list for article content.

Install via NPM
npm install @bolt/components-ol

Usage

  {% include "@bolt-components-ol/ol.twig" with {
  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.",
    "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
        • Type: string
      • contentItems

        Passes to @bolt/text.twig

        • Type: object

DEPRECATED

Use the items prop instead.

 N/A
items* array

All items can be simple text or items.

 N/A

ol

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

ol theme variation

Theme: xlight

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

Theme: light

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

Theme: dark

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

Theme: xdark

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

Theme: medium

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

ol nested items

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

ol with web component

Web Component Usage

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

Example

<bolt-ol>
  <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-ol>

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

Item 1 Item 2 Item 3 Item 4 Item 5 Sub Item 1 Sub Item 2 Sub Item 3 Sub Item 4 Item Item Item Item Item Sub Item 5 Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item

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