# CaseStudy

> A case study as one full-bleed scene: a running head, a plate that crosses the whole band edge to edge, and under it the title with the problem, what was built and the measured result set on a twelve-column grid, the way a printed portfolio lays out a project spread.

```ts
import { CaseStudy } from "@sdxc/ui/landing";
```

Renders the running head, the edge-to-edge plate and the spread: one column on a phone, then
from the `lg` container twelve, the first three a margin beside the title and the facts. Server
markup and CSS alone; `--ui-landing-case-figure-size` resizes the result's figure.

## Examples

```tsx
<CaseStudy
	index="01"
	client="Harbour Line"
	meta="Transit · 2025"
	title="A ferry timetable you read from the pier"
	scene={<DeparturesBoard />}
	sceneLabel="The departures board on pier 3"
	problem="Riders missed connections they could not see coming."
	built="A live board and a rider app sharing one timetable service."
	result={{ value: "−31%", label: "missed connections, first winter" }}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `index?` | `RemixNode` | The project's place in the sequence, such as "01", set first in the running head. |
| `client` | `RemixNode` | Who the work was for. |
| `meta?` | `RemixNode` | Sector, year or discipline, set after the client in the running head. |
| `title` | `RemixNode` | The spread's headline, at chapter display size through the ambient heading depth. |
| `scene` | `RemixNode` | The scene: inline SVG or drawn UI, stretched to fill the plate. |
| `sceneLabel` | `string` | What the scene shows, read as the plate's accessible name. |
| `plate?` | `string` | The plate's fill behind the scene. Defaults to the tinted neutral. |
| `problem` | `RemixNode` | What stood in the client's way. |
| `built` | `RemixNode` | The work, as delivered. |
| `result` | `Result` | The measured outcome. |
| `labels?` | `Labels` | Column labels; English by default. |

Also accepts everything in `Omit<LandingSection.Props, "children" | "title" | "align">`.