# Work grid · MIAN

Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link.

- Id: `work-grid` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/work-grid
- Use for: portfolio projects, show four portfolio projects, case studies grid, selected work, agency work, client projects.
- On a page: showcase · prominence high · density medium. Usually after: hero. Usually before: feature-grid, process, testimonial.
- Alternatives: bento, story-card.
- Avoid: Twelve small thumbnails, or tiles without client and outcome. Four to six projects, mixed sizes.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-work`: The grid: one column, then two, then six tracks.
- `mn-work-item`: A project (<article>); the title link covers it. Spans 3 of 6.
- `mn-work-wide · mn-work-narrow · mn-work-full`: Span 4, 2 or 6 of 6 tracks. Pair a wide tile with a narrow one.
- `mn-work-media`: The image in a fixed ratio.
- `mn-work-client`: Client and year, small.
- `mn-work-outcome`: 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

### Selected work

```html
<section class="mn-section" aria-labelledby="work-h"><div class="mn-container">
  <div class="mn-section-head"><h2 class="mn-title" id="work-h">Selected work</h2></div>
  <div class="mn-work">
    <article class="mn-work-item mn-work-wide"><div class="mn-work-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div><p class="mn-work-client">Transilvania Rail · 2026</p><h3 class="mn-work-title"><a href="#">A timetable people can read on a platform</a></h3><p class="mn-work-outcome">Ticket questions at stations down by a third in six months.</p></article>
    <article class="mn-work-item mn-work-narrow"><div class="mn-work-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div><p class="mn-work-client">Muzeul Satului · 2025</p><h3 class="mn-work-title"><a href="#">An archive of 300 houses</a></h3><p class="mn-work-outcome">Opened to schools across Romania.</p></article>
    <article class="mn-work-item"><div class="mn-work-media"><svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="600" height="450" fill="var(--mn-fg)"/><path d="M0 330 300 90l300 240Z" fill="var(--mn-accent)"/><circle cx="300" cy="300" r="40" fill="var(--mn-bg)"/></svg></div><p class="mn-work-client">Halden Audio · 2025</p><h3 class="mn-work-title"><a href="#">Identity for a speaker maker</a></h3><p class="mn-work-outcome">Launched in 11 countries.</p></article>
    <article class="mn-work-item"><div class="mn-work-media"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div><p class="mn-work-client">Orto · 2024</p><h3 class="mn-work-title"><a href="#">Ordering for 140 farms</a></h3><p class="mn-work-outcome">Orders placed a week earlier on average.</p></article>
  </div>
</div></section>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/work-grid/source