List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

Basic

To keep your code dry, you can iterate over data to eliminate repetition in your code.

An item
A second item
A third item
A fourth item
And a fifth one

Astro file

---
// Template example only
const listItems: string[] = [
  'An item',
  'A second item',
  'A third item',
  'A fourth item',
  'And a fifth one',
];
---

<ul class="list-group">
  {listItems.map((item) => <li class="list-group-item">{item}</li>)}
</ul>