List

A styled ordered or unordered list for grouped item content — not for layout rows.

Last updated

  • First item
  • Second item
  • Third item
Show code
<List>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</List>

Add

npx @ava-ui/apogee add list

No Apogee dependencies.

Usage

---
import List from '@/components/apogee/List/List.astro'
---
<List>
  <li>First item</li>
  <li>Second item</li>
</List>

API

@composable — exposed to Content Editors in AVA. Any other native <ul> / <ol> attribute passes through (...rest).

Prop Type Default Description
as 'ul' | 'ol' 'ul' Element tag — unordered or ordered list.
marker 'default' | 'none' 'default' none drops the marker and its start indent.
class string — Extra classes, merged last.

Variants

as × marker, every combination:

  • Unordered
  • Bulleted
  1. Ordered
  2. Numbered
  • Unordered, no marker
  • Flush to the edge
  1. Ordered, no marker
  2. Flush to the edge
Show code
<List as="ul">
<li>Unordered</li>
<li>Bulleted</li>
</List>
<List as="ol">
<li>Ordered</li>
<li>Numbered</li>
</List>
<List as="ul" marker="none">
<li>Unordered, no marker</li>
<li>Flush to the edge</li>
</List>
<List as="ol" marker="none">
<li>Ordered, no marker</li>
<li>Flush to the edge</li>
</List>

States

No interactive states — List renders static markup.

Examples

Nested list, and a list of longer content:

  1. Set up the project

    • Install dependencies
    • Copy the env file
  2. Ship it
Show code
<List as="ol">
<li>
  Set up the project
  <List marker="none" class="mt-1 ms-4">
    <li>Install dependencies</li>
    <li>Copy the env file</li>
  </List>
</li>
<li>Ship it</li>
</List>

Accessibility

Native semantics, no extra ARIA needed. <ul> / <ol> with real <li> children already gives assistive tech the list role, item count, and position.

Tokens

Token Used for
--foreground-neutral-faded Marker (bullet / number) colour

Do / Don’t

  • Do use List for a set of related items where a marker or order carries meaning.
  • Do pass marker="none" when nesting a List inside a layout that supplies its own bullets or icons.
  • Don’t use List for layout rows or navigation — use Stack or Navbar.
  • Don’t put non-<li> children directly in the slot — the marker and indent styling target <li>.

Content

  • Keep items short — sentence case, no ending period unless the item is a full sentence.
  • Keep phrasing parallel across items (all start with the same part of speech).

Related

TableA styled, horizontally-scrollable table. Write plain thead/tbody markup — Table only styles it.
DataGridA data table with client-side column sorting and optional row selection.
ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.