Staaarter

Current Work Tile Grid

A section that shows what the studio is running right now: a statement with a paragraph and a pill CTA share one baseline, followed by three tall project tiles whose ruled captions name the client and the stage the work is at.

By Staaarter Team
Feature
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/current-work-tile-grid.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature14.tsx instead.

Usage

The file also exports feature14Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature14, feature14Demo } from "@/components/blocks/feature/feature14";

export default function Page() {
  return <Feature14 {...feature14Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodeundefinedStatement heading on the left of the header row.
descriptionstringundefinedSupporting paragraph under the heading.
ctaFeature14CtaundefinedOptional pill-shaped button link on the right of the header row.
projectsFeature14Project[]noneTall project tiles, each with an image, client name, and stage.
classNamestringnoneExtra classes for the outer section element.

Types

interface Feature14Cta {
  label: string;
  href: string;
}

interface Feature14Project {
  image?: { src: string; alt: string };
  client: string;
  stage: string;
}

Behavior notes

  • cta renders as a plain rounded-full link (Button with render={<Link/>}); there is no real navigation wired up beyond the href you pass.
  • The heading/description and the CTA share a baseline via flexbox on sm and above and stack on mobile.
  • projects renders in a fixed 3-column grid on sm and above and stacks to a single column below that; stage is a plain text string, not a computed status.