Interactive preview, sandboxed: nothing you type leaves this page.
import "@fontsource/instrument-serif/latin-400.css";import "@fontsource/instrument-sans/latin-400.css";import "@fontsource/instrument-sans/latin-500.css";import "./block.css";const projects = [ { client: "Northline Coffee", title: "A quieter kind of morning", year: "2025", discipline: "Brand identity", featured: true }, { client: "Fieldnotes Press", title: "The seasonal reader", year: "2024", discipline: "Editorial design" }, { client: "Common Ground", title: "Rooms to grow", year: "2024", discipline: "Packaging" }, { client: "Alder House", title: "A place in the landscape", year: "2023", discipline: "Art direction" },];export default function Block() { return ( <section className="studio type-body bg-[#f7f6f2] text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100"> <div className="studio-inner mx-auto max-w-7xl px-6 py-16 sm:px-10 sm:py-20 lg:px-16 lg:py-24"> <header className="studio-intro"> <h1 className="type-display studio-title">Independent design for clear, lasting communication.</h1> <p className="studio-process"> We begin by listening closely and understanding the brief. Together, we shape a considered design that gives each idea room to be clear. We refine the details and deliver carefully, ready for the work ahead. </p> </header> <div className="studio-work mt-16 border-t border-neutral-300 dark:border-neutral-700 sm:mt-20 lg:mt-24"> <div className="work-heading flex items-center justify-between border-b border-neutral-300 py-4 dark:border-neutral-700"> <h2 className="text-xs font-medium uppercase tracking-[0.14em] text-neutral-600 dark:text-neutral-400">Recent projects</h2> <span className="text-xs text-neutral-600 dark:text-neutral-400">2023 — 2025</span> </div> <ol className="m-0 list-none p-0"> {projects.map((project) => ( <li key={project.client} className="project-row grid grid-cols-1 gap-3 border-b border-neutral-300 py-6 dark:border-neutral-700 sm:grid-cols-12 sm:items-center sm:gap-5 sm:py-7"> <div className="sm:col-span-6"> <div className="flex flex-wrap items-center gap-x-3 gap-y-1"> <h3 className="m-0 text-base font-medium leading-6">{project.client}</h3> {project.featured && <span className="featured-label border border-neutral-400 px-2 py-0.5 text-[10px] leading-4 text-neutral-700 dark:border-neutral-600 dark:text-neutral-300">Featured</span>} </div> <p className="type-display project-title m-0 mt-1">{project.title}</p> </div> <div className="project-meta flex items-center justify-between gap-4 text-sm text-neutral-600 dark:text-neutral-400 sm:col-span-6 sm:justify-end sm:gap-10"> <span>{project.discipline}</span> <span className="tabular-nums">{project.year}</span> </div> </li> ))} </ol> </div> </div> </section> );}$ pnpm add @fontsource/instrument-sans@^5.3.0 @fontsource/instrument-serif@^5.3.0