🎞 Component
Media Grid
Editorial 2-column layout with one large primary asset and stacked secondary items at a 21:9 aspect ratio.
Live Preview
Usage
import MediaGrid from '@chronos-ui/core/react/MediaGrid';
import '@chronos-ui/core/theme.css';
<MediaGrid
primaryMedia={{
id: 'p1',
media: { type: 'image', url: '/primary.jpg' },
mapLinks: [{ url: '/feature' }],
altText: 'Feature story',
}}
secondaryMedia={[
{ id: 's1', media: { type: 'image', url: '/sec1.jpg' }, mapLinks: [{ url: '/story-1' }] },
{ id: 's2', media: { type: 'image', url: '/sec2.jpg' }, mapLinks: [{ url: '/story-2' }] },
]}
/><script lang="ts">
import MediaGrid from '@chronos-ui/core/svelte/MediaGrid.svelte';
</script>
<MediaGrid
primaryMedia={{ id: 'p1', media: { type: 'image', url: '/primary.jpg' } }}
secondaryMedia={[{ id: 's1', media: { type: 'image', url: '/sec1.jpg' } }]}
/><script type="module"
src="node_modules/@chronos-ui/core/webcomponents/MediaGrid.js"></script>
<media-grid
primary-media='{"id":"p1","media":{"type":"image","url":"/primary.jpg"}}'
secondary-media='[{"id":"s1","media":{"type":"image","url":"/sec1.jpg"}}]'
></media-grid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| primaryMedia required | MediaGridItem | — | The large featured asset occupying 2/3 of the grid width |
| secondaryMedia | MediaGridItem[] | undefined | Optional stacked secondary assets in the right column |
| className | string | undefined | Additional CSS class names on the root element |
The secondary column uses
grid-template-rows: 1fr 1fr — all secondary items share equal height regardless of count.