Data display
MediaFilmstrip
Groups ordered media thumbnails and a localized selection summary.
01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
Illustrative photo collection1 photo selected
Selection and ordering belong to the application. Pair thumbnails with sibling move buttons for an accessible reorder workflow.
View MediaFilmstrip code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { Image, MediaFilmstrip, MediaThumbnail } from '@santi020k/lumen-astro'
---
<MediaFilmstrip label="Illustrative photo collection" selectionLabel="1 photo selected">
<li><MediaThumbnail label="Lake landscape" mediaId="lake" selected order={1}><Image alt="" src="/comparison-after.svg" width={960} height={600} /></MediaThumbnail></li>
<li><MediaThumbnail label="Original landscape" mediaId="original" order={2}><Image alt="" src="/comparison-before.svg" width={960} height={600} /></MediaThumbnail></li>
</MediaFilmstrip>
<p>Selection and ordering belong to the application. Pair thumbnails with sibling move buttons for an accessible reorder workflow.</p>import { Image, MediaFilmstrip, MediaThumbnail } from '@santi020k/lumen-react'
export const Example = () => (
<>
<MediaFilmstrip label="Illustrative photo collection" selectionLabel="1 photo selected">
<li><MediaThumbnail label="Lake landscape" mediaId="lake" selected order={1}><Image alt="" src="/comparison-after.svg" width={960} height={600} /></MediaThumbnail></li>
<li><MediaThumbnail label="Original landscape" mediaId="original" order={2}><Image alt="" src="/comparison-before.svg" width={960} height={600} /></MediaThumbnail></li>
</MediaFilmstrip>
<p>Selection and ordering belong to the application. Pair thumbnails with sibling move buttons for an accessible reorder workflow.</p>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-media-filmstrip label="Illustrative photo collection" selection-label="1 photo selected">
<li><lumen-media-thumbnail label="Lake landscape" media-id="lake" selected order="1"><lumen-image alt="" src="/comparison-after.svg" width="960" height="600"></lumen-image></lumen-media-thumbnail></li>
<li><lumen-media-thumbnail label="Original landscape" media-id="original" order="2"><lumen-image alt="" src="/comparison-before.svg" width="960" height="600"></lumen-image></lumen-media-thumbnail></li>
</lumen-media-filmstrip>
<p>Selection and ordering belong to the application. Pair thumbnails with sibling move buttons for an accessible reorder workflow.</p>02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add MediaFilmstriplumen add MediaFilmstrippnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add MediaFilmstrip --target reactlumen add MediaFilmstrip --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add MediaFilmstrip --target elementslumen add MediaFilmstrip --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| label / selectionLabel | string | required | Names the ordered collection and exposes a localized selection count or summary in a status region. Elements uses selection-label. |
| children | native li elements | required | Each list item contains MediaThumbnail plus optional sibling move buttons. Never nest move buttons inside the thumbnail. Use moveLumenMediaItem and stable IDs to accept reorder requests. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |