CaseStudy
A case study as one full-bleed scene.
01 / 03Harbour LineRiver ferries · 2025 · 14 weeks
A ferry that tells you the tram will wait
- Problem
- Riders changing from ferry to tram missed one connection in five.
- What we built
- One timetable service behind the pier boards, the rider app and tram dispatch.
- Result
- −31%missed connections over the first winter
View code
<CaseStudy
index="01 / 03"
client="Harbour Line"
meta="River ferries · 2025 · 14 weeks"
title="A ferry that tells you the tram will wait"
scene={<DeparturesBoard />}
sceneLabel="The pier 3 board: the 08:22 to Hoboken reads “Tram 4 waits 3 min”"
plate="#0d1b2e"
problem="Riders changing from ferry to tram missed one connection in five."
built="One timetable service behind the pier boards, the rider app and tram dispatch."
result={{ value: "−31%", label: "missed connections over the first winter" }}
/>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
- CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
- Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
- plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
- UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
- QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
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.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
index | RemixNode | No | The project's place in the sequence, such as "01", set first in the running head. |
client | RemixNode | Yes | Who the work was for. |
meta | RemixNode | No | Sector, year or discipline, set after the client in the running head. |
title | RemixNode | Yes | The spread's headline, at chapter display size through the ambient heading depth. |
scene | RemixNode | Yes | The scene: inline SVG or drawn UI, stretched to fill the plate. |
sceneLabel | string | Yes | What the scene shows, read as the plate's accessible name. |
plate | string | No | The plate's fill behind the scene. Defaults to the tinted neutral. |
problem | RemixNode | Yes | What stood in the client's way. |
built | RemixNode | Yes | The work, as delivered. |
result | Result | Yes | The measured outcome. |
labels | Labels | No | Column labels; English by default. |
Also accepts everything in Omit<LandingSection.Props, "children" | "title" | "align">.