ba-inline-list

Dotted list for presenting details in a concise layout.

Figma

GitHub

Storybook

Live Demo

Category 1 Details 1

Category 2 Details 2

Category 3 Details 3


<ba-inline-list>
  <ba-inline-list-item>
    <span slot="category">Category 1</span>
    <span slot="details">Details 1</span>
  </ba-inline-list-item>
  <ba-inline-list-item>
    <span slot="category">Category 2</span>
    <span slot="details">Details 2</span>
  </ba-inline-list-item>
  <ba-inline-list-item>
    <span slot="category">Category 3</span>
    <span slot="details">Details 3</span>
  </ba-inline-list-item>
</ba-inline-list>

Guidelines

This component is designed for short, concise lists. Please keep the overall text to a minimum and consider longer translations.

Code

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑inline‑list‑item>`

Parent components

ba-inline-list can be slotted into:

Usage

Basic usage

To add content use the ba-inline-list-item component.

Basic usage of ba-inline-list

<ba-inline-list>
  <ba-inline-list-item>
    <span slot="category">Category 1</span>
    <span slot="details">Details 1</span>
  </ba-inline-list-item>
  <ba-inline-list-item>
    <span slot="category">Category 2</span>
    <span slot="details">Details 2</span>
  </ba-inline-list-item>
  <ba-inline-list-item>
    <span slot="category">Category 3</span>
    <span slot="details">Details 3</span>
  </ba-inline-list-item>
</ba-inline-list>