Annotated Centerpiece

A feature that centers one image tile floating a live metrics panel, annotated from both sides by four icon callouts. On smaller screens the callouts collapse under the tile instead of squeezing beside it.

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

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

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

Usage

The file also exports feature13Demo, 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 { Feature13, feature13Demo } from "@/components/blocks/feature/feature13";

export default function Page() {
  return <Feature13 {...feature13Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small centered label above the heading.
heading	ReactNode	undefined	Centered section heading.
description	string	undefined	Centered supporting paragraph.
image	{ src: string; alt: string }	undefined	Centered image tile; falls back to a placeholder via MediaSlot when omitted.
metrics	Feature13Metric[]	none	Small label/value pairs shown on the floating metrics panel over the image.
leftCallouts	Feature13Callout[]	none	Icon callouts annotating the left side of the image on large screens.
rightCallouts	Feature13Callout[]	none	Icon callouts annotating the right side of the image on large screens.
className	string	none	Extra classes for the outer section element.

Types

interface Feature13Metric {
  label: string;
  value: string;
}

interface Feature13Callout {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

Below the lg breakpoint, leftCallouts and rightCallouts each render as a 2-column grid stacked directly under the image (via CSS order utilities), rather than side by side with it.
At lg and above, leftCallouts and rightCallouts each become a single vertical column flanking the centered image, with rightCallouts' icon and text order mirrored so the icon sits closest to the image.
The floating metrics panel values are static demo props, not a real live feed.

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.