Service Grid With Icons

A feature section with a centered header, a three-column grid of bordered cards each led by an icon, and an optional call-to-action with a short caption underneath. Good for laying out a services or capabilities list that wants a distinct card per item rather than a plain list.

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

npx shadcn add https://staaarter.com/r/service-grid-with-icons.json

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

Usage

The file also exports feature73Demo, 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 { Feature73, feature73Demo } from "@/components/blocks/feature/feature73";

export default function Page() {
  return <Feature73 {...feature73Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	none	Small label above the heading.
heading	ReactNode	none	Section heading.
description	string	none	Supporting copy under the heading.
services	ServiceGridItem[]	none	Cards in the grid, each with an icon, title, and description.
cta	HeaderCta	none	Optional link button below the grid.
ctaCaption	string	none	Optional caption shown under the CTA button.
className	string	none	Extra classes for the outer section element.

Types

type ServiceGridItem = { icon: LucideIcon; title: string; description: string };

type HeaderCta = { label: string; href: string };

Behavior notes

Server component, no client-side interactivity: the CTA renders as a real Next.js Link via the button's render prop but has no destination behavior beyond navigating wherever href points.
Card icons are a real per-item `icon: LucideIcon` prop, this is safe here specifically because the component is a server component; a client version of this block would need a fixed, position-indexed icon array instead.
Grid collapses to two columns on small screens and a single column below that, per Tailwind's sm/lg breakpoints.

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.