MediaMasonry
Masonry gallery section — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders tiles top-to-bottom per column). Tiles style themselves; section provides only the layout shell.
Category: layout · WCAG 2.1-AA · section, gallery, masonry
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Tile elements (images, cards, quotes) — consumer-provided and self-styled |
title | ReactNode | — | Section heading above the gallery |
description | ReactNode | — | Subheading below the section title |
headingLevel | 1 | 2 | 3 | 2 | HTML heading level for the section title |
cols | number | 3 | Number of masonry columns |
gap | 1|2|3|4|5|6|8|10|12 | 4 | Gap between tiles (spacing token step) |
Design tokens
--cascivo-text-2xl--cascivo-text-base--cascivo-font-bold--cascivo-text-secondary--cascivo-space-*
When to use
- A full-width media gallery section with masonry packing
- Showcasing images or media tiles of varying heights
When not to use
- A bare masonry primitive without section framing — use Masonry
- Uniform-height cards in rows — use AutoGrid
Examples
Media gallery
Masonry gallery with three image tiles; falls back to CSS columns in unsupported browsers
<MediaMasonry title="Customer stories" cols={3} gap={4}><img src="/photo-1.jpg" alt="Team at desk" /><img src="/photo-2.jpg" alt="Product screenshot" /><img src="/photo-3.jpg" alt="Dashboard view" /></MediaMasonry>Related components
- Masonry — Uses the masonry primitive for tile packing