Editorial Mosaic
A deterministic composition grid for mixed media, text blocks and deliberate whitespace.
- editorial
- editorial
- mosaic
- asymmetry
- media
- Concrete / 01
- Studio / 02
- Glass / 03
- Table / 04
- Threshold / 05
Usage
usage
import { EditorialMosaic } from "@pinky-ui/layouts";
<EditorialMosaic items={projects} columns={3} preset="editorial" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | EditorialMosaicItem[] | — | Ordered media, text and featured items with explicit spans. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Items remain in logical list order regardless of spans.
- Focus receives the same lift and metadata treatment as pointer hover.
- Metadata is supplemental; the item label remains available without hover.
Performance
- CSS Grid performs stable placement; no random coordinates or measurement pass.
- Neighbour response is a single focused-index state, not a per-item pointer loop.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Editorial portfolios, case studies and mixed portrait/landscape collections.
When not to use
- Tables, dense comparison grids or unbounded feeds.
Skill
Purpose
Use for a deliberately authored mix of portrait media, landscape media, text and whitespace. It is a composition grid, not an automatic masonry algorithm.
Use when
- A portfolio or editorial index needs a lead item and supporting rhythm.
- Each item can carry an explicit span and the collection is curated.
Avoid when
- Users need strict row comparison or an unbounded feed.
- Placement would be generated randomly.
Hover and focus
Use the editorial preset sparingly: lift the focused item, quiet immediate neighbours and reveal supplemental metadata. Focus must receive the same treatment as pointer hover.
Touch, motion and performance
Keep the mobile grid in DOM order and normalize spans. Reduced motion keeps the authored grid static. Prefer explicit media dimensions; the layout uses stable CSS Grid and a single active index.