Vanilla Breeze

File Display

Render uploaded or downloadable files as accessible rows, links, or cards. Uses [data-file] with icon-wc, native download links, and optional status/actions.

Overview

Most interfaces that move files around — attachments, downloads, upload progress, asset galleries — need the same four ingredients: a type icon, a name, some meta (size, status, extension), and optional actions (download, remove, retry).

Vanilla Breeze ships a CSS-only pattern for this under [data-file]. It applies to <li>, <a>, or any block container, so you can compose it inside a list, use it as a clickable download link, or drop it into a <layout-grid>. No web component — just markup.

Key features:

  • Row layout (default) or card layout via data-file-layout="card"
  • Status colors for upload flows via data-file-status="uploading|success|error"
  • Works as a pure link (<a data-file href="…" download>) with hover and focus states
  • Pairs with icon-wc for type icons and <layout-grid> for galleries
  • No JavaScript — style only

Basic File Row

The default layout: icon, name, meta, and actions in a single row. Name truncates with an ellipsis, meta is font-variant-numeric: tabular-nums so sizes align vertically in a list.

Entire row as a download link

For a quieter list, put data-file directly on an <a>. The whole row becomes clickable and picks up hover/focus styles automatically. Pair with download for same-origin files and target="_blank" rel="noopener" for external links.

Card Grid

Add data-file-layout="card" for a stacked icon-above-name layout that slots into a <layout-grid>. Good for asset galleries and download directories.

Upload list with status

For upload flows, the meta text is the status. Use data-file-status to color it semantically: uploading / processing map to the interactive color, success to green, error to red. Put the remove or retry action in .file-actions.

Attributes

Attribute Values Description
data-file boolean Opts the element in to the file row layout. Works on <li>, <a>, or any block container.
data-file-layout card Switch to a stacked (icon-above-name) card layout. Default omitted = single-row layout.
data-file-status uploading, processing, success, error Colors the .file-meta text to signal upload state. Falls back to muted text when omitted.

Supporting classes

Class Where Purpose
.file-list on <ul>/<ol> Removes list styling and stacks rows with a small gap. Optional — only needed when rows are in a list.
.file-name inside [data-file] Flexible; truncates long names with ellipsis. Wraps in card layout instead.
.file-meta inside [data-file] Muted, tabular-numeric text for size/status/type.
.file-actions inside [data-file] Right-aligned slot for download/remove/retry controls.

Accessibility

  • Use a real <a> for downloads and <button type="button"> for in-page actions (remove, retry, cancel). No div role="button" tricks.
  • Icon-only action buttons need an accessible name. Use aria-label="Remove <filename>" so screen readers can distinguish one row’s remove button from the next.
  • If the status message changes during an upload, consider wrapping the meta span in <output aria-live="polite"> so screen readers hear progress updates.
  • Type icons are decorative — icon-wc already sets aria-hidden="true" automatically. The filename carries the meaning.
  • For external links, pair target="_blank" with the “opens in new tab” hint from Accessibility Utilities.

Related

data-upload

Drag-and-drop file input. The file list it renders uses this same [data-file] pattern.

data-accept

Declarative file-type gating for file inputs.

a[download]

Native download semantics and filename hints.

icon-wc

Lucide-backed icon component — source for the type icons used here.
↑