Annotated Core Layout

A central core image/icon tile sits framed by feature cards positioned around it. Each card references how a module connects back to the system's core, indicated by a colored accent border on the edge facing the core rather than a drawn connecting line.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/annotated-core-layout.json

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

Usage

The file also exports feature41Demo, 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 { Feature41, feature41Demo } from "@/components/blocks/feature/feature41";

export default function Page() {
  return <Feature41 {...feature41Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading; omitted entirely when unset.
heading	ReactNode	none	Section heading.
description	string	undefined	Supporting copy under the heading.
coreLabel	string	none	Label shown inside the central core tile.
coreIcon	LucideIcon	none	Icon shown inside the central core tile.
modules	CoreModuleCard[]	none	Module cards positioned around the core, grouped by their `side`.
className	string	undefined	Extra classes for the outer section element.

Types

type CoreModuleCard = {
  icon: LucideIcon;
  title: string;
  description: string;
  side: "top" | "right" | "bottom" | "left";
};

Behavior notes

Plain server component with no interactivity; the entire layout is static markup.
Module cards with side "left" or "top" render in the column left of the core tile; "right" or "bottom" render in the column to its right, so the connection is implied by grouping and by which edge of each card carries the accent border rather than a drawn path.
Icons (both the core icon and each module's icon) are passed as real LucideIcon component references, which is fine here since the block is a server component and never crosses a client boundary.
Columns stack into a single centered column below the sm breakpoint, with the core tile appearing between the two card groups in DOM order.

More Feature Blocks

View all →

Full-Bleed Workspace Band

Two-column header above a full-bleed image band with a live view switcher, closing on three numbered captions.

Center-Line Journey Timeline

Vertical hairline timeline alternating stages either side, dropping a phone frame on one step.

Figure-Led Evidence Rows

Tall image with a floating before-and-after card, leading into oversized-figure evidence rows.

Staircase Asset Trio

Three image tiles stepping down the page in a staircase, each floating a different live asset.

Sticky Reference List

Sticky heading column beside three labelled groups of checked capabilities, closing on a footnote.

Day Timeline Rows

Hairline rows walking through one working day, stamped with time and a live approval card inline.