New
ListsDivided List
A semantic list of rows with a primary label and an optional trailing meta value.
#list#divided#basic
3 frameworksBeginner
Loading…
Rows fronted by a fixed gradient thumbnail tile with a title, description and trailing badge.
<!--
The thumbnail is a fixed-size gradient tile (no external image to preload or
let rot) carrying a mono glyph. It is shrink-0 so it holds its 48px square
while the text column takes min-w-0 + truncate. The description is line-clamped
to one line and the trailing badge hides below sm.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Media">
<li class="flex items-center gap-3 px-3 py-2.5">
<span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-rose-500 to-orange-500 text-sm font-bold text-white" aria-hidden="true">MP4</span>
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Launch teaser final cut</span>
<span class="block truncate text-xs text-gray-500 dark:text-gray-400">1920x1080 · 24 MB · edited 2h ago</span>
</span>
<span class="hidden shrink-0 rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600 sm:inline dark:bg-gray-800 dark:text-gray-300">Video</span>
</li>
</ul>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | MediaItem[] | - | The array of items to render. |
ariaLabel | string | 'Media' | The button's accessible name. Required for icon-only buttons. |
The thumbnail is a `shrink-0` gradient tile carrying a short glyph - no image to preload or let rot. The description truncates and the trailing badge hides below `sm`, so the title always wins the space it needs.