Staaarter

Feature with Side Heading and Icon Grid

A two-column feature section with a large eyebrow/heading/description block on the left and a 2x2 grid of feature cards on the right, each with a large badge-style icon, title, and description. A straightforward way to summarize four capabilities beside a single strong headline.

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/feature-side-heading-icon-grid.json

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

Usage

The file also exports feature68Demo, 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 { Feature68, feature68Demo } from "@/components/blocks/feature/feature68";

export default function Page() {
  return <Feature68 {...feature68Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall label above the heading.
headingReactNodenoneLarge section heading, left column.
descriptionstringundefinedSupporting paragraph under the heading.
cardsFeature68Card[]noneIcon feature cards rendered in a 2x2 grid on the right.
classNamestringnoneExtra classes for the outer section element.

Types

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

Behavior notes

  • Fully static Server Component: no event handlers, no client state.
  • Each card accepts its own icon component reference directly as a prop, which is safe here since this is a Server Component (not "use client").