Site
Workflow grid
Responsive card grid with titles, descriptions, and media panels.
$ npx context-ds add workflow-gridUsage
Use it for
What people build with the product (workflows, use cases), each with a dot story (story panel) or an interface mockup (mockup panel).
Avoid
- Pictures of different shapes in one row
- Buttons inside the cards
- Gray panel backgrounds
Example
examples/workflow-grid.tsx
import { SiteSection } from "@/components/site/section";import { WorkflowGrid } from "@/components/site/workflow-grid";import { AutofillStory } from "@/components/visuals/stories/autofill-story";import { BatchStory } from "@/components/visuals/stories/batch-story";import { EnrichStory } from "@/components/visuals/stories/enrich-story";import { RagStory } from "@/components/visuals/stories/rag-story";import { ResearchStory } from "@/components/visuals/stories/research-story";import { ScrapeStory } from "@/components/visuals/stories/scrape-story";// Each workflow with its own dot story in the panel, as on the home page.export function Site() { return (<SiteSection> <WorkflowGrid className="w-full" items={[ { title: "Scrape anything", description: "Turn webpages and PDFs into Markdown, HTML, structured fields, images, and screenshots in one request.", media: <ScrapeStory className="w-full" /> }, { title: "Ground RAG in fresh content", description: "Collect pages with Scrape and Crawl, add documents with Parse, and keep your retrieval index current with Monitors.", media: <RagStory className="w-full" /> }, { title: "Run deep research on demand", description: "Resolve a domain to a typed brand profile, then research the company in your JSON shape, with sources.", media: <ResearchStory className="w-full" /> }, { title: "Run batches at scale", description: "Scrape thousands of URLs or crawl entire sites in one job, then collect results when it completes.", media: <BatchStory className="w-full" /> }, { title: "Enrich any entity your agent sees", description: "Connect company references and person identifiers to brand profiles and people data.", media: <EnrichStory className="w-full" /> }, { title: "Autofill onboarding forms", description: "Pre-fill company fields from a work email domain so more users finish signing up.", media: <AutofillStory className="w-full" /> }, ]} /> </SiteSection>);}Source
components/site/workflow-grid.tsx
import * as React from "react";import { cn } from "@/lib/utils";// The home page's workflow cards: three across on wide screens, each a white card in the soft blue ring with an h4// title, a short description and a picture panel pinned to the bottom. The panels keep one shape (459 by 317 in three// columns, a fixed height below), so each picture scales down rather than reflowing and cards in a row line up.export type WorkflowItem = { title: string; description: string; media?: React.ReactNode; mediaVariant?: "story" | "mockup" };/** * The picture panel, in the ring with its radius repeated so the corners match. `story` (the default) is white and * holds a dot story centered at up to 26rem (81.5% of the panel in three columns, so it scales with it); `mockup` is * the pale panel the site's interface mockups sit in, filled edge to edge. */function WorkflowMedia({ variant = "story", children, className }: { variant?: "story" | "mockup"; children?: React.ReactNode; className?: string }) { return ( <div data-slot="workflow-media" className={cn("h-92 rounded-card bg-ring-tint p-2 xl:aspect-[459/317] xl:h-auto", className)}> {variant === "mockup" ? ( <div className="flex h-full flex-col justify-center overflow-hidden rounded-card bg-announcement select-none">{children}</div> ) : ( <div className="flex h-full items-center justify-center overflow-hidden rounded-card bg-surface px-4 select-none sm:px-9 xl:px-0"> <div className="relative flex w-full max-w-104 justify-center xl:w-[81.5%] xl:max-w-none">{children}</div> </div> )} </div> );}function WorkflowCard({ title, description, media, mediaVariant, className }: WorkflowItem & { className?: string }) { return ( <div data-slot="workflow-card" className={cn("rounded-card bg-ring-tint p-2", className)}> <div className="flex h-full min-w-0 flex-col gap-6 rounded-card bg-surface p-6 ring-1 ring-hairline md:p-8 xl:p-6"> <div className="flex flex-col gap-3"> <h3 className="text-h4 leading-snug font-normal tracking-normal text-fg">{title}</h3> <p className="text-body leading-normal text-fg-secondary">{description}</p> </div> {media !== undefined && <WorkflowMedia variant={mediaVariant} className="mt-auto"> {media} </WorkflowMedia>} </div> </div> );}function WorkflowGrid({ items, className }: { items: WorkflowItem[]; className?: string }) { return ( <ul data-slot="workflow-grid" className={cn("grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-5", className)}> {items.map((item) => ( <li key={item.title} className="-m-2 flex"> <WorkflowCard className="flex-1" {...item} /> </li> ))} </ul> );}export { WorkflowGrid, WorkflowCard, WorkflowMedia };Reference: src/components/sections/home/workflow-grid.tsx; src/components/sections/home/home-design.ts.