Files
tier 2 — classesA folder of files as a table or as a grid of tiles, the files attached to a record, and uploads on their way up. The pieces are small — a type icon, a name cut in the middle, a meta line — and the rows they sit in are the library's own table and list. Which files there are, what is selected and what a click does are the app's. Pictures and video in a thread are on Chat; one looked at large is the lightbox.
A folder
A .table with the path above it as a
.breadcrumb. The name column's cell is a
.file-cell — the .file-icon and the .file-name
— and a cell holding one takes whatever the .col-fit columns leave and cuts
the name inside it, rather than pushing the table wider than its card. Make the cell an
<a> so the file opens like a link; sort with
.th-sort, select with aria-selected on the row.
Folders first, with the count where a file has its size.
| Owner | Actions | |||
|---|---|---|---|---|
| Signed delivery notes | 14 files | Alex Fischer | ||
| delivery-note-week-38-carrier-return-signed.pdf | 84 KB | Priya Nair | ||
| stock-check-2026-09-14.xlsx | 1.2 MB | Alex Fischer | ||
| racking-bay-4-after-the-move.jpg | 3.4 MB | Tomás Ferreira | ||
| dock-handover-checklist.docx | 46 KB | Alex Fischer | ||
| labels-week-38.zip | 12.8 MB | Priya Nair |
<div class="card">
<div class="card-head">
<nav class="breadcrumb sedna-mb-0" aria-label="Folder">
<a class="breadcrumb-item" href="#"><i class="ri-hard-drive-2-line"></i> Shared files</a>
<a class="breadcrumb-item" href="#">Warehouse</a>
<a class="breadcrumb-item" href="#">Dock 4</a>
<span class="breadcrumb-item" aria-current="page">Week 38</span>
</nav>
<div class="card-head-right">
<button class="btn btn-sm" type="button"><i class="ri-folder-add-line"></i> New folder</button>
<button class="btn btn-sm btn-primary" type="button"><i class="ri-upload-2-line"></i> Upload</button>
</div>
</div>
<div class="sedna-scroll-x" tabindex="0" role="group" aria-label="Files in Week 38">
<table class="table">
<thead>
<tr>
<th aria-sort="ascending"><button class="th-sort" type="button">Name</button></th>
<th class="col-num col-fit" aria-sort="none"><button class="th-sort" type="button">Size</button></th>
<th class="col-fit" aria-sort="none"><button class="th-sort" type="button">Modified</button></th>
<th class="col-fit">Owner</th>
<th class="col-fit"><span class="visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="file-cell" href="#">
<span class="file-icon file-icon--sm"><i class="ri-folder-3-fill"></i></span>
<span class="file-name">Signed delivery notes</span>
</a>
</td>
<td class="col-num col-muted">14 files</td>
<td class="col-muted"><time datetime="2026-09-14T16:05">Today, 16:05</time></td>
<td class="col-muted">Alex Fischer</td>
<td></td>
</tr>
<tr aria-selected="true">
<td>
<a class="file-cell" href="#" title="delivery-note-week-38-carrier-return-signed.pdf">
<span class="file-icon file-icon--sm file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-name">
<span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">signed.pdf</span>
</span>
</a>
</td>
<td class="col-num col-muted">84 KB</td>
<td class="col-muted"><time datetime="2026-09-14T11:20">Today, 11:20</time></td>
<td class="col-muted">Priya Nair</td>
<td><button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Actions for delivery-note-week-38-carrier-return-signed.pdf"><i class="ri-more-2-line"></i></button></td>
</tr>
<tr>
<td>
<a class="file-cell" href="#" title="stock-check-2026-09-14.xlsx">
<span class="file-icon file-icon--sm file-icon--sheet"><i class="ri-file-excel-2-line"></i></span>
<span class="file-name">
<span class="file-name-start">stock-check-2026-</span><span class="file-name-end">09-14.xlsx</span>
</span>
</a>
</td>
<td class="col-num col-muted">1.2 MB</td>
<td class="col-muted"><time datetime="2026-09-13T08:42">Yesterday</time></td>
<td class="col-muted">Alex Fischer</td>
<td><button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Actions for stock-check-2026-09-14.xlsx"><i class="ri-more-2-line"></i></button></td>
</tr>
<tr>
<td>
<a class="file-cell" href="#" title="racking-bay-4-after-the-move.jpg">
<span class="file-icon file-icon--sm file-icon--image"><i class="ri-image-line"></i></span>
<span class="file-name">
<span class="file-name-start">racking-bay-4-after-the-</span><span class="file-name-end">move.jpg</span>
</span>
</a>
</td>
<td class="col-num col-muted">3.4 MB</td>
<td class="col-muted"><time datetime="2026-09-12T14:10">12 Sep</time></td>
<td class="col-muted">Tomás Ferreira</td>
<td><button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Actions for racking-bay-4-after-the-move.jpg"><i class="ri-more-2-line"></i></button></td>
</tr>
<tr>
<td>
<a class="file-cell" href="#" title="dock-handover-checklist.docx">
<span class="file-icon file-icon--sm file-icon--doc"><i class="ri-file-word-2-line"></i></span>
<span class="file-name">
<span class="file-name-start">dock-handover-</span><span class="file-name-end">checklist.docx</span>
</span>
</a>
</td>
<td class="col-num col-muted">46 KB</td>
<td class="col-muted"><time datetime="2026-09-09T09:00">9 Sep</time></td>
<td class="col-muted">Alex Fischer</td>
<td><button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Actions for dock-handover-checklist.docx"><i class="ri-more-2-line"></i></button></td>
</tr>
<tr>
<td>
<a class="file-cell" href="#" title="labels-week-38.zip">
<span class="file-icon file-icon--sm"><i class="ri-file-zip-line"></i></span>
<span class="file-name">
<span class="file-name-start">labels-week-</span><span class="file-name-end">38.zip</span>
</span>
</a>
</td>
<td class="col-num col-muted">12.8 MB</td>
<td class="col-muted"><time datetime="2026-09-08T17:30">8 Sep</time></td>
<td class="col-muted">Priya Nair</td>
<td><button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Actions for labels-week-38.zip"><i class="ri-more-2-line"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>A name cut in the middle
text-overflow cuts at the end, which is exactly where two files differ —
-signed.pdf and -unsigned.pdf both end in an ellipsis. So the app
splits the name in two: .file-name-start is cut and
.file-name-end, the last few characters and the extension, never shrinks. Read
aloud the two spans are the whole name, and a name that fits shows whole. Put the full name
in title for the pointer. Split inside a word, not at a space: a space at the
end of the start collapses.
delivery-note-week-38-carrier-return-signed.pdf
delivery-note-week-38-carrier-return-unsigned.pdf
stock-check.xlsx
<div class="sedna-col sedna-gap-2" style="max-width:260px">
<span class="file-cell">
<span class="file-icon file-icon--sm file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-name" title="delivery-note-week-38-carrier-return-signed.pdf">
<span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">signed.pdf</span>
</span>
</span>
<span class="file-cell">
<span class="file-icon file-icon--sm file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-name" title="delivery-note-week-38-carrier-return-unsigned.pdf">
<span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">unsigned.pdf</span>
</span>
</span>
<span class="file-cell">
<span class="file-icon file-icon--sm file-icon--sheet"><i class="ri-file-excel-2-line"></i></span>
<span class="file-name" title="stock-check.xlsx">
<span class="file-name-start">stock-</span><span class="file-name-end">check.xlsx</span>
</span>
</span>
</div>Type icons
.file-icon is a Remix Icon glyph on a small tile. The kind tints the glyph from
the categorical series — --pdf, --doc,
--sheet, --slides, --image and --media
— and anything else keeps the neutral ink; the glyph still names the kind, so colour
is never the only signal. --sm is the size for a table row or an upload. An
<img> in the tile is a thumbnail in the same place.
<div class="sedna-row sedna-row-wrap sedna-gap-3">
<span class="file-icon" title="Folder"><i class="ri-folder-3-fill"></i></span>
<span class="file-icon file-icon--pdf" title="PDF"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-icon file-icon--doc" title="Document"><i class="ri-file-word-2-line"></i></span>
<span class="file-icon file-icon--sheet" title="Spreadsheet"><i class="ri-file-excel-2-line"></i></span>
<span class="file-icon file-icon--slides" title="Presentation"><i class="ri-file-ppt-2-line"></i></span>
<span class="file-icon file-icon--image" title="Picture"><i class="ri-image-line"></i></span>
<span class="file-icon file-icon--media" title="Video"><i class="ri-film-line"></i></span>
<span class="file-icon file-icon--media" title="Audio"><i class="ri-music-2-line"></i></span>
<span class="file-icon" title="Archive"><i class="ri-file-zip-line"></i></span>
<span class="file-icon" title="Anything else"><i class="ri-file-text-line"></i></span>
<span class="file-icon file-icon--sm file-icon--pdf" title="PDF, small"><i class="ri-file-pdf-2-line"></i></span>
</div>A list of files
Where there are no columns to compare — recent files, a panel beside a record —
the rows are a .list: the icon leading, the name as the
.list-title and the .file-meta line under it. The meta line draws
its own separators, so they are never copied or read out, and wraps rather than widening the
row.
<div class="card" style="max-width:420px">
<div class="card-head"><h3>Recent files</h3></div>
<ul class="list">
<li>
<a class="list-row" href="#" title="delivery-note-week-38-carrier-return-signed.pdf">
<span class="file-icon file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="list-main">
<span class="file-name list-title">
<span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">signed.pdf</span>
</span>
<span class="file-meta"><span>84 KB</span><time datetime="2026-09-14T11:20">Today, 11:20</time><span>Priya Nair</span></span>
</span>
</a>
</li>
<li>
<a class="list-row" href="#" title="stock-check-2026-09-14.xlsx">
<span class="file-icon file-icon--sheet"><i class="ri-file-excel-2-line"></i></span>
<span class="list-main">
<span class="file-name list-title">
<span class="file-name-start">stock-check-2026-</span><span class="file-name-end">09-14.xlsx</span>
</span>
<span class="file-meta"><span>1.2 MB</span><time datetime="2026-09-13T08:42">Yesterday</time><span>Alex Fischer</span></span>
</span>
</a>
</li>
<li>
<a class="list-row" href="#" title="handover-week-38.pptx">
<span class="file-icon file-icon--slides"><i class="ri-file-ppt-2-line"></i></span>
<span class="list-main">
<span class="file-name list-title">
<span class="file-name-start">handover-week-</span><span class="file-name-end">38.pptx</span>
</span>
<span class="file-meta"><span>5.6 MB</span><time datetime="2026-09-11T15:00">11 Sep</time><span>Tomás Ferreira</span></span>
</span>
</a>
</li>
</ul>
</div>Attached to a record
A .file-list of .file-item cards, each an <a>
that downloads. .file-item-main stacks the name over its meta line, and
.file-item-status is the trailing glyph. The same item is a file in a
chat message. An item that is a link holds no other control; one with
actions is a <li>, as below.
Attachments
- delivery-note-week-38-carrier-return-signed.pdf
racking-bay-4-after-the-move.jpg
- stock-check-2026-09-14.xlsx
The thumbnail is a photograph by CHUTTERSNAP on Unsplash.
<div class="card" style="max-width:520px">
<div class="card-head">
<h3>Attachments</h3>
<div class="card-head-right">
<button class="btn btn-sm" type="button"><i class="ri-attachment-2"></i> Attach</button>
</div>
</div>
<div class="card-body">
<ul class="file-list sedna-mt-0" aria-label="Attachments">
<li>
<a class="file-item" href="#" download>
<span class="file-icon file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-item-main">
<span class="file-name" title="delivery-note-week-38-carrier-return-signed.pdf">
<span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">signed.pdf</span>
</span>
<span class="file-meta"><span>84 KB</span><time datetime="2026-09-14T11:20">Today, 11:20</time><span>Priya Nair</span></span>
</span>
<i class="ri-download-2-line file-item-status" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="file-item" href="#" download>
<span class="file-icon file-icon--image"><img src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=72&h=72&fit=crop&q=70&auto=format" width="36" height="36" alt="" loading="lazy" /></span>
<span class="file-item-main">
<span class="file-name" title="racking-bay-4-after-the-move.jpg">
<span class="file-name-start">racking-bay-4-after-the-</span><span class="file-name-end">move.jpg</span>
</span>
<span class="file-meta"><span>3.4 MB</span><time datetime="2026-09-12T14:10">12 Sep</time><span>Tomás Ferreira</span></span>
</span>
<i class="ri-download-2-line file-item-status" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="file-item" href="#" download>
<span class="file-icon file-icon--sheet"><i class="ri-file-excel-2-line"></i></span>
<span class="file-item-main">
<span class="file-name" title="stock-check-2026-09-14.xlsx">
<span class="file-name-start">stock-check-2026-</span><span class="file-name-end">09-14.xlsx</span>
</span>
<span class="file-meta"><span>1.2 MB</span><time datetime="2026-09-13T08:42">Yesterday</time><span>Alex Fischer</span></span>
</span>
<i class="ri-download-2-line file-item-status" aria-hidden="true"></i>
</a>
</li>
</ul>
<p class="form-hint sedna-mb-0">The thumbnail is a photograph by CHUTTERSNAP on Unsplash.</p>
</div>
</div>Uploads
Live — drag a file onto it. The
.dropzone above, and one .file-item per
file under it. Uploading needs no modifier: a .progress
in .file-item-main is the state and the size column says how far.
.file-item--done and .file-item--error colour the
.file-item-status glyph, whose shape says the same without the colour, and a
failure's meta line says why. .file-item-actions holds what can be done to it
now — cancel while it goes, retry when it failed, delete once it is there. Name every
icon button after its file.
- stock-check-2026-09-14.xlsx 64%
- racking-bay-4-after-the-move.jpg 3.4 MB
- delivery-note-week-38-signed.pdf
- dock-4-walkthrough.mov
- dock-handover-checklist.docx
<div style="max-width:520px">
<label class="dropzone" data-dropzone>
<input type="file" multiple class="visually-hidden" />
<i class="ri-upload-cloud-2-line"></i>
<span>Drop files here, or click to choose</span>
<span class="form-hint">PDF, pictures and spreadsheets, up to 25 MB each</span>
</label>
<ul class="file-list" aria-label="Uploads">
<li class="file-item">
<span class="file-icon file-icon--sm file-icon--sheet"><i class="ri-file-excel-2-line"></i></span>
<span class="file-item-main">
<span class="file-item-name">stock-check-2026-09-14.xlsx</span>
<span class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Uploading stock-check-2026-09-14.xlsx"><span class="progress-bar" style="width:64%"></span></span>
</span>
<span class="file-item-size">64%</span>
<span class="file-item-actions">
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Cancel the upload of stock-check-2026-09-14.xlsx"><i class="ri-close-line"></i></button>
</span>
</li>
<li class="file-item">
<span class="file-icon file-icon--sm file-icon--image"><i class="ri-image-line"></i></span>
<span class="file-item-main">
<span class="file-item-name">racking-bay-4-after-the-move.jpg</span>
<span class="file-meta"><span>Waiting</span></span>
</span>
<span class="file-item-size">3.4 MB</span>
<span class="file-item-actions">
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Remove racking-bay-4-after-the-move.jpg"><i class="ri-close-line"></i></button>
</span>
</li>
<li class="file-item file-item--done">
<span class="file-icon file-icon--sm file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span>
<span class="file-item-main">
<span class="file-item-name">delivery-note-week-38-signed.pdf</span>
<span class="file-meta"><span>84 KB</span><span>Uploaded</span></span>
</span>
<i class="ri-checkbox-circle-fill file-item-status" role="img" aria-label="Uploaded"></i>
<span class="file-item-actions">
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Delete delivery-note-week-38-signed.pdf"><i class="ri-delete-bin-line"></i></button>
</span>
</li>
<li class="file-item file-item--error">
<span class="file-icon file-icon--sm"><i class="ri-file-video-line"></i></span>
<span class="file-item-main">
<span class="file-item-name">dock-4-walkthrough.mov</span>
<span class="file-meta"><span>148 MB is over the 25 MB limit</span></span>
</span>
<i class="ri-error-warning-fill file-item-status" role="img" aria-label="Failed"></i>
<span class="file-item-actions">
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Remove dock-4-walkthrough.mov"><i class="ri-close-line"></i></button>
</span>
</li>
<li class="file-item file-item--error">
<span class="file-icon file-icon--sm file-icon--doc"><i class="ri-file-word-2-line"></i></span>
<span class="file-item-main">
<span class="file-item-name">dock-handover-checklist.docx</span>
<span class="file-meta"><span>The connection dropped at 40%</span></span>
</span>
<i class="ri-error-warning-fill file-item-status" role="img" aria-label="Failed"></i>
<span class="file-item-actions">
<button class="btn btn-ghost btn-sm" type="button"><i class="ri-refresh-line"></i> Retry</button>
</span>
</li>
</ul>
</div>Attached, not yet uploaded
A picture waiting to go is a .file-thumb: the thumbnail with its remove button
over the corner, beside the chips of the other files. It is what a
chat composer shows before sending, and what a form shows before its
submit. Name the remove button after the picture, not only “Remove”.
<form class="card" style="max-width:520px">
<div class="card-body sedna-col sedna-gap-3">
<label class="form-label" for="note-4209">Note on ORD-4209</label>
<textarea class="form-input" id="note-4209" rows="2">Two cartons crushed on arrival, photos attached.</textarea>
<div class="sedna-row-wrap sedna-gap-2" aria-label="Attached, not yet uploaded">
<span class="file-thumb">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=96&h=96&fit=crop&q=70&auto=format" width="48" height="48" alt="The crates on the floor" loading="lazy" />
<button class="chip-dismiss" type="button" aria-label="Remove the photo of the crates"><i class="ri-close-line"></i></button>
</span>
<span class="file-thumb">
<img src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=96&h=96&fit=crop&q=70&auto=format" width="48" height="48" alt="The racking in aisle 4" loading="lazy" />
<button class="chip-dismiss" type="button" aria-label="Remove the photo of the racking"><i class="ri-close-line"></i></button>
</span>
<span class="chip"><i class="ri-file-pdf-2-line"></i> delivery-note-4209.pdf <button class="chip-dismiss" type="button" aria-label="Remove delivery-note-4209.pdf"><i class="ri-close-line"></i></button></span>
</div>
<p class="form-hint">Photographs by Adrian Sulyok and CHUTTERSNAP on Unsplash.</p>
</div>
<div class="card-foot"><button class="btn btn-primary" type="submit">Save the note</button></div>
</form>A grid of tiles
Live — tick a tile. .file-grid is a real
<ul>, breakpoint-free, of .file-tiles: a
.file-tile-thumb holding a picture or a large .file-icon, the name
and the meta line. A tile is three controls and never one element with a click handler:
.file-tile-check, a .form-check named
for the file, selects; .file-tile-open opens, and its hit area is the whole
tile under the other two; .file-tile-menu acts. Selected is read from the
checkbox, so it needs no class and no script. The checkbox and the menu appear on hover and
focus, stay once anything is selected, and are always there on a touch screen. The count and
the bulk actions are a .toolbar.
- Signed delivery notes
-
racking-bay-4-after-the-move.jpg
-
crates-on-the-floor.jpg
- delivery-note-week-38-carrier-return-signed.pdf
- stock-check-2026-09-14.xlsx
Photographs by CHUTTERSNAP and Adrian Sulyok on Unsplash.
<div class="card">
<div class="toolbar sedna-divider-bottom" style="padding:var(--space-4) var(--space-6)">
<div class="toolbar-filters">
<span class="toolbar-count" role="status">2 selected</span>
<button class="btn btn-sm btn-ghost" type="button">Clear</button>
</div>
<div class="toolbar-actions">
<button class="btn btn-sm" type="button"><i class="ri-download-2-line"></i> Download</button>
<button class="btn btn-sm" type="button"><i class="ri-folder-transfer-line"></i> Move</button>
</div>
</div>
<div class="card-body">
<ul class="file-grid" aria-label="Files in Week 38">
<li class="file-tile">
<label class="form-check file-tile-check"><input type="checkbox" aria-label="Select Signed delivery notes" /></label>
<a class="file-tile-open" href="#">
<span class="file-tile-thumb"><span class="file-icon"><i class="ri-folder-3-fill"></i></span></span>
<span class="file-name">Signed delivery notes</span>
</a>
<span class="file-meta"><span>14 files</span></span>
</li>
<li class="file-tile">
<label class="form-check file-tile-check"><input type="checkbox" checked aria-label="Select racking-bay-4-after-the-move.jpg" /></label>
<a class="file-tile-open" href="#" title="racking-bay-4-after-the-move.jpg">
<span class="file-tile-thumb">
<img src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=320&h=320&fit=crop&q=70&auto=format"
width="320" height="320" loading="lazy" alt="" />
</span>
<span class="file-name"><span class="file-name-start">racking-bay-4-after-the-</span><span class="file-name-end">move.jpg</span></span>
</a>
<span class="file-meta"><span>3.4 MB</span><time datetime="2026-09-12">12 Sep</time></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu" type="button" aria-label="Actions for racking-bay-4-after-the-move.jpg"><i class="ri-more-2-line"></i></button>
</li>
<li class="file-tile">
<label class="form-check file-tile-check"><input type="checkbox" checked aria-label="Select crates-on-the-floor.jpg" /></label>
<a class="file-tile-open" href="#" title="crates-on-the-floor.jpg">
<span class="file-tile-thumb">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=320&h=320&fit=crop&q=70&auto=format"
width="320" height="320" loading="lazy" alt="" />
</span>
<span class="file-name"><span class="file-name-start">crates-on-the-</span><span class="file-name-end">floor.jpg</span></span>
</a>
<span class="file-meta"><span>2.9 MB</span><time datetime="2026-09-12">12 Sep</time></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu" type="button" aria-label="Actions for crates-on-the-floor.jpg"><i class="ri-more-2-line"></i></button>
</li>
<li class="file-tile">
<label class="form-check file-tile-check"><input type="checkbox" aria-label="Select delivery-note-week-38-carrier-return-signed.pdf" /></label>
<a class="file-tile-open" href="#" title="delivery-note-week-38-carrier-return-signed.pdf">
<span class="file-tile-thumb"><span class="file-icon file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span></span>
<span class="file-name"><span class="file-name-start">delivery-note-week-38-carrier-return-</span><span class="file-name-end">signed.pdf</span></span>
</a>
<span class="file-meta"><span>84 KB</span><time datetime="2026-09-14">Today</time></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu" type="button" aria-label="Actions for delivery-note-week-38-carrier-return-signed.pdf"><i class="ri-more-2-line"></i></button>
</li>
<li class="file-tile">
<label class="form-check file-tile-check"><input type="checkbox" aria-label="Select stock-check-2026-09-14.xlsx" /></label>
<a class="file-tile-open" href="#" title="stock-check-2026-09-14.xlsx">
<span class="file-tile-thumb"><span class="file-icon file-icon--sheet"><i class="ri-file-excel-2-line"></i></span></span>
<span class="file-name"><span class="file-name-start">stock-check-2026-</span><span class="file-name-end">09-14.xlsx</span></span>
</a>
<span class="file-meta"><span>1.2 MB</span><time datetime="2026-09-13">Yesterday</time></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu" type="button" aria-label="Actions for stock-check-2026-09-14.xlsx"><i class="ri-more-2-line"></i></button>
</li>
</ul>
<p class="form-hint sedna-mb-0">Photographs by CHUTTERSNAP and Adrian Sulyok on Unsplash.</p>
</div>
</div>Pictures that must not be cropped
A tile crops its picture to fill the square, which is right for a photograph and ruins a
logo or a screenshot. .file-tile-thumb--contain keeps the frame and fits the
whole picture inside it, so a row stays level. .file-tile-thumb--natural drops
the frame and gives the tile the picture's own shape, so the row goes ragged. The ratio
comes from the <img>'s width and height, so
write both, or the tile jumps when the picture loads. A tile with no picture keeps its frame
either way.
Photographs by CHUTTERSNAP and Adrian Sulyok on Unsplash.
<div class="sedna-col sedna-gap-2">
<ul class="file-grid" aria-label="Contained in the frame">
<li class="file-tile">
<a class="file-tile-open" href="#" title="loading-bay-banner.jpg">
<span class="file-tile-thumb file-tile-thumb--contain">
<img src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=480&h=270&fit=crop&q=70&auto=format"
width="480" height="270" loading="lazy" alt="" />
</span>
<span class="file-name">loading-bay-banner.jpg</span>
</a>
<span class="file-meta"><span>16:9</span></span>
</li>
<li class="file-tile">
<a class="file-tile-open" href="#" title="crates-portrait.jpg">
<span class="file-tile-thumb file-tile-thumb--contain">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=240&h=360&fit=crop&q=70&auto=format"
width="240" height="360" loading="lazy" alt="" />
</span>
<span class="file-name">crates-portrait.jpg</span>
</a>
<span class="file-meta"><span>2:3</span></span>
</li>
</ul>
<ul class="file-grid" aria-label="In their own shape">
<li class="file-tile">
<a class="file-tile-open" href="#" title="loading-bay-banner.jpg">
<span class="file-tile-thumb file-tile-thumb--natural">
<img src="https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=480&h=270&fit=crop&q=70&auto=format"
width="480" height="270" loading="lazy" alt="" />
</span>
<span class="file-name">loading-bay-banner.jpg</span>
</a>
<span class="file-meta"><span>16:9</span></span>
</li>
<li class="file-tile">
<a class="file-tile-open" href="#" title="crates-portrait.jpg">
<span class="file-tile-thumb file-tile-thumb--natural">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=240&h=360&fit=crop&q=70&auto=format"
width="240" height="360" loading="lazy" alt="" />
</span>
<span class="file-name">crates-portrait.jpg</span>
</a>
<span class="file-meta"><span>2:3</span></span>
</li>
</ul>
<p class="form-hint sedna-mb-0">Photographs by CHUTTERSNAP and Adrian Sulyok on Unsplash.</p>
</div>Names shown whole, the action always there
For a reader who picked these files and has to tell them apart by name, and who will not
hover to look for a button. .file-name--wrap shows the whole name over as
many lines as it takes, breaking a long run with no spaces in it anywhere, instead of
cutting it. .file-tile-menu--always keeps that one button visible without a
hover or a tap first; the checkbox keeps its own rule. Name the button after the file and
say what it does to it.
<ul class="file-grid" aria-label="Chosen for the newsletter">
<li class="file-tile">
<a class="file-tile-open" href="#">
<span class="file-tile-thumb"><span class="file-icon file-icon--image"><i class="ri-image-line"></i></span></span>
<span class="file-name file-name--wrap">IMG_20260918_102915_warehouse_open_day_group_photo.jpeg</span>
</a>
<span class="file-meta"><span>4.1 MB</span></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu file-tile-menu--always" type="button"
aria-label="Remove IMG_20260918_102915_warehouse_open_day_group_photo.jpeg from the newsletter"><i class="ri-delete-bin-line"></i></button>
</li>
<li class="file-tile">
<a class="file-tile-open" href="#">
<span class="file-tile-thumb"><span class="file-icon file-icon--pdf"><i class="ri-file-pdf-2-line"></i></span></span>
<span class="file-name file-name--wrap">Opening hours autumn.pdf</span>
</a>
<span class="file-meta"><span>96 KB</span></span>
<button class="btn btn-ghost btn-icon btn-sm file-tile-menu file-tile-menu--always" type="button"
aria-label="Remove Opening hours autumn.pdf from the newsletter"><i class="ri-delete-bin-line"></i></button>
</li>
</ul>An empty folder
An .empty-state where the table or the grid would
be, with the path still above it so the reader knows which folder is empty, and the one
action that fills it.
This folder is empty
Delivery notes and stock checks for week 39 will land here from Monday.
<div class="card" style="max-width:640px">
<div class="card-head">
<nav class="breadcrumb sedna-mb-0" aria-label="Folder">
<a class="breadcrumb-item" href="#"><i class="ri-hard-drive-2-line"></i> Shared files</a>
<a class="breadcrumb-item" href="#">Warehouse</a>
<span class="breadcrumb-item" aria-current="page">Week 39</span>
</nav>
</div>
<div class="empty-state">
<svg class="state-art" aria-hidden="true"><use href="#nothing-yet" /></svg>
<span class="empty-state-title">This folder is empty</span>
<p>Delivery notes and stock checks for week 39 will land here from Monday.</p>
<label class="form-file">
<input type="file" multiple />
<span class="btn btn-sm btn-primary"><i class="ri-upload-2-line"></i> Upload files</span>
</label>
</div>
</div>