Lily Design System™

DocumentList

A list displaying documents with titles and metadata.

Example

DocumentList
Show demo markup 
<div class="document-list" aria-label="a list displaying documents with titles and metadata">DocumentList</div>
Usage example 
<DocumentList>
  <DocumentListItem title="Annual report 2025" href="/docs/annual-2025.pdf" type="PDF" size="1.2 MB" />
  <DocumentListItem title="Statement of accounts" href="/docs/accounts-2025.pdf" type="PDF" size="540 KB" />
</DocumentList>
Show Svelte source 
// In your Svelte component:
import DocumentList from "lily-design-system-svelte-headless/components/DocumentList/DocumentList.svelte";

<DocumentList>
  <!-- list children -->
</DocumentList>

Usage

<DocumentList>
  <DocumentListItem title="Annual report 2025" href="/docs/annual-2025.pdf" type="PDF" size="1.2 MB" />
  <DocumentListItem title="Statement of accounts" href="/docs/accounts-2025.pdf" type="PDF" size="540 KB" />
</DocumentList>

Props

PropTypeDefaultDescription
childrenslot (required)—DocumentListItem children
...restPropsHTML attributes—Spread onto the root <ol>

Keyboard Interactions

  • No keyboard interactions on the list itself

ARIA

  • Native ordered list semantics

When to Use

  • Displaying a list of attachments, downloads, or related documents on a page

When Not to Use

  • Use CollectionList for general content collections (articles, products)
  • Use DataTable when document metadata needs sortable columns

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .document-list as the root class. No default styles are included.

Related components

  • document-list-item — child item
  • collection-list — generic content collection
  • download-button — single download link styled as a button

References

Implementation Notes

  • Renders an <ol> of DocumentListItem children
  • Used to list downloadable or related documents (PDFs, attachments, references)
  • Spreads restProps onto the root <ol>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: document-list
  • PascalCase: DocumentList
  • Description: a list displaying documents with titles and metadata
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <ol>
  • CSS class: .document-list
  • Interactive: no

ARIA

  • Native ordered list semantics

Keyboard

  • No keyboard interactions on the list itself

Props

  • children: slot (required) (default: —) — DocumentListItem children
  • ...restProps: HTML attributes (default: —) — Spread onto the root <ol>