ba-inline-list
Dotted list for presenting details in a concise layout.
Airframe
Web Components
React
React Native
Anatomy
List item
An individual entry in the inline list, combining a category and its details.
Separator
The dot that visually separates one list item from the next.
Design Documentation
This component is designed for short, concise lists. Keep the overall text to a minimum and consider how longer translations may affect wrapping.
Use this component for concise details, not for long descriptions or content that needs several levels of structure. Present longer or more complex content in a format that is easier to scan and navigate.
Live Demo
<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>
Properties and attributes
This component does not have any properties or attributes.
Permitted ARIA roles
- None
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 and provide category and details content for each item.
<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
Each list item should have text in both the category and details slots. Make sure the category describes the information that follows, so the relationship remains clear when read by assistive technology.
Use ba-inline-list-item for each entry in ba-inline-list. The component exposes a list and list items to assistive technology, allowing users to understand that the entries belong together.
Further reading:
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-inline-list is used to present a small set of concise, related details.
- Category labels and details are kept short, with longer translations considered to avoid wrapping.
- Each ba-inline-list-item has a clear category and corresponding details.
Accessibility checklist
- ba-inline-list has discernible text for every list item.
- Information conveyed by the dotted separators is also clear from the text and list structure.
These checks are handled by the component and do not need to be repeated each time it is used.
- The list and its items are exposed to assistive technology as a list and list items.
- Separators are hidden from assistive technology.
- Colour contrast for the text and separators meets requirements in all BAgel themes.
- Animations respect users' reduced motion settings.
- High contrast mode adjustments preserve the text and list structure.