{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "work-grid", "name": "Work grid", "category": "Sections", "description": "Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link.", "tags": [ "work grid", "portfolio", "case studies", "projects", "agency", "studio", "selected work", "showcase", "website" ], "requiresJs": false, "license": "LicenseRef-MIAN-1.0", "composition": { "role": "showcase", "intents": [ "portfolio projects", "show four portfolio projects", "case studies grid", "selected work", "agency work", "client projects" ], "prominence": "high", "density": "medium", "worksAfter": [ "hero" ], "worksBefore": [ "feature-grid", "process", "testimonial" ], "alternatives": [ "bento", "story-card" ], "avoid": "Twelve small thumbnails, or tiles without client and outcome. Four to six projects, mixed sizes." }, "url": "https://mian.ro/components/work-grid", "markdownUrl": "https://mian.ro/ai/components/work-grid.md", "classes": [ { "name": "mn-work", "description": "The grid: one column, then two, then six tracks." }, { "name": "mn-work-item", "description": "A project (
); the title link covers it. Spans 3 of 6." }, { "name": "mn-work-wide · mn-work-narrow · mn-work-full", "description": "Span 4, 2 or 6 of 6 tracks. Pair a wide tile with a narrow one." }, { "name": "mn-work-media", "description": "The image in a fixed ratio." }, { "name": "mn-work-client", "description": "Client and year, small." }, { "name": "mn-work-outcome", "description": "One line of result, in plain words." } ], "accessibility": [ "Each project is an article whose heading is the link, so the list of links reads as project names.", "The image is decorative when the title says the same; otherwise give it alt text describing the work.", "Do not rely on hover to reveal the title or client." ], "examples": [ { "title": "Selected work", "description": null, "html": "
\n

Selected work

\n
\n \n \n \n \n
\n
" } ], "css": ".mn-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5cqi, 3.5rem) clamp(1.25rem, 3cqi, 2rem); }\n@container mn (min-width: 40rem) { .mn-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-work-full { grid-column: 1 / -1; } }\n@container mn (min-width: 62rem) {\n .mn-work { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n .mn-work-item { grid-column: span 3; }\n .mn-work-wide { grid-column: span 4; }\n .mn-work-narrow { grid-column: span 2; }\n .mn-work-full { grid-column: 1 / -1; }\n}\n.mn-work-item { position: relative; display: grid; gap: .35rem; align-content: start; min-width: 0; }\n.mn-work-media { aspect-ratio: 4 / 3; margin-bottom: .75rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); }\n.mn-work-wide .mn-work-media, .mn-work-full .mn-work-media { aspect-ratio: 16 / 10; }\n@container mn (min-width: 62rem) { .mn-work-narrow .mn-work-media { aspect-ratio: 4 / 5.2; } }\n.mn-work-media > svg, .mn-work-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale calc(var(--mn-duration) * 3) var(--mn-ease); }\n.mn-work-item:hover .mn-work-media > * { scale: 1.02; }\n.mn-work-client { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-work-title { margin: 0; font: var(--mn-heading-weight) clamp(1.125rem, 2.2cqi, 1.5rem)/1.25 var(--mn-font-heading); letter-spacing: -.01em; text-wrap: balance; }\n.mn-work-title a { color: var(--mn-fg); text-decoration: none; }\n.mn-work-title a::after { content: \"\"; position: absolute; inset: 0; }\n.mn-work-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }\n.mn-work-outcome { margin: 0; color: var(--mn-muted); line-height: 1.55; }", "js": null, "install": { "css": "https://mian.ro/dist/mian.css", "js": null, "registryItem": "https://mian.ro/r/work-grid.json" } }