MediaTile

One file: a thumbnail or the glyph of its kind, the name, the size and a notice. Use it alone in a sidebar or a detail view; MediaGrid uses it for every tile.

MediaTile

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

price-list-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

Dark theme, MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

price-list-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

High contrast theme, MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

price-list-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

UsageLink to the section Usage

tsx

import { MediaTile } from '@skribly/ui/media'

tsx

<MediaTile file={{ id: 1, name: 'harbour.webp', kind: 'image', kindLabel: 'Image',
  src, alt: 'Hills over a calm bay', details: '182 KB · 1920×1080',
  notice: { tone: 'warn', label: 'No alt text' } }}
  brokenLabel="Preview not available"
  actions={<Button size="sm" variant="outline">Edit</Button>} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The thumbnail uses the file alt text, or none for decorative images, so the name is not read twice.
A thumbnail that fails to load becomes a named placeholder in the danger tone.
Long names wrap onto two lines and stay whole for screen readers.
Buttons stay visible instead of appearing on hover, and the selected state is a border and a checked box, not a colour.

This demo runs through axe in all three themes on every test run. See what the tests check.