Lily Design System™

DocumentListItem

One document entry in a document list.

Example

DocumentListItem
Show demo markup 
<div class="document-list-item" aria-label="one document entry in a document list">DocumentListItem</div>
Usage example 
<DocumentListItem title="Annual report" href="/annual.pdf" type="PDF" size="1.2 MB" modified="14 January 2026" />
Show Svelte source 
// In your Svelte component:
import DocumentListItem from "lily-design-system-svelte-headless/components/DocumentListItem/DocumentListItem.svelte";

<DocumentListItem>
  <!-- DocumentListItem content -->
</DocumentListItem>

Usage

<DocumentListItem title="Annual report" href="/annual.pdf" type="PDF" size="1.2 MB" modified="14 January 2026" />

Props

PropTypeDefaultDescription
titlestring (required)—Document title (link text)
hrefstring (required)—Document URL
typestring—File type label, e.g. "PDF", "DOCX"
sizestring—File size, e.g. "1.2 MB"
modifiedstring—Last-modified date string
...restPropsHTML attributes—Spread onto the root <li>

Keyboard Interactions

  • Tab moves focus onto the document link
  • Enter activates the link to download the document (native browser behaviour)

ARIA

  • Native anchor and list-item semantics
  • The link's accessible name combines the title and the file type/size when announced by screen readers

When to Use

  • As a child of DocumentList

When Not to Use

  • Use DownloadButton for a single, prominent download action

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-item as the root class. No default styles are included.

Related components

  • document-list — parent list
  • download-button — single download link styled as a button

References

Implementation Notes

  • Renders an <li> containing the document title (as a link), file type, file size, and optional last-modified date
  • Title is rendered as an <a download> so browsers offer a download dialog
  • Metadata (type, size, modified) is rendered in <span> elements
  • Spreads restProps onto the root <li>

Canonical contract

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

Metadata

  • Component: document-list-item
  • PascalCase: DocumentListItem
  • Description: one document entry in a document list
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <li>
  • CSS class: .document-list-item
  • Interactive: yes

ARIA

  • Native anchor and list-item semantics
  • The link's accessible name combines the title and the file type/size when announced by screen readers

Keyboard

  • Tab moves focus onto the document link
  • Enter activates the link to download the document (native browser behaviour)

Props

  • title: string (required) (default: —) — Document title (link text)
  • href: string (required) (default: —) — Document URL
  • type: string (default: —) — File type label, e.g. "PDF", "DOCX"
  • size: string (default: —) — File size, e.g. "1.2 MB"
  • modified: string (default: —) — Last-modified date string
  • ...restProps: HTML attributes (default: —) — Spread onto the root <li>