# Feature Section v4

> Industrial-style three-card feature grid with uppercase heading, blank top card placeholders, and compact data-first copy.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/feature-section-v4).

- Page, with a live preview: https://shadcn.exchange/r/uiception/feature-section-v4
- Screenshot: https://shadcn.exchange/shot/uiception/feature-section-v4/light.png
- Registry item: https://uiception.com/r/feature-section-v4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/feature-section-v4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `geist`
- Registry items: `https://uiception.com/r/block-media.json`, `badge`, `card`

## Files

### `registry/new-york/blocks/feature-section-v4/page.tsx`

```tsx
import FeatureSectionV4 from "./components/feature-section-v4"

export default function Page() {
  return <FeatureSectionV4 />
}
```

### `registry/new-york/blocks/feature-section-v4/components/feature-section-v4.tsx`

```tsx
import { createBlockImage } from "@/lib/block-media"

import FeatureGrid from "./feature-grid"

const featureImage = createBlockImage("feature-section-v4")

export default function FeatureSectionV4() {
  const featureImageById = {
    "cognitive-ai": featureImage("image-1.png"),
    "global-reach": featureImage("image-2.png"),
    "limitless-growth": featureImage("image-3.png"),
  } as const

  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mb-9 grid gap-3 lg:mb-11 lg:grid-cols-[minmax(0,1fr)_minmax(0,380px)] lg:items-end lg:gap-10">
          <h2 className="max-w-[16ch] text-[clamp(1.75rem,3.4vw,2.75rem)] leading-[1.06] font-medium tracking-[-0.02em] uppercase">
            Built for What&apos;s Possible
          </h2>
          <p className="max-w-[42ch] text-3.75 leading-[1.72] font-normal text-muted-foreground lg:pb-1">
            When you are building what comes next, you need tools that learn
            from real use, work across regions, and grow with every goal you
            add.
          </p>
        </div>
        <FeatureGrid imageById={featureImageById} />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/feature-section-v4/components/feature-grid.tsx`

```tsx
import Image from "next/image"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { featureSectionItems } from "../lib/features"
import "../styles/feature-grid.css"

type FeatureId = (typeof featureSectionItems)[number]["id"]

type FeatureGridProps = {
  imageById: Record<FeatureId, string>
}

export default function FeatureGrid({ imageById }: FeatureGridProps) {
  return (
    <ul className="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:gap-3.4 lg:grid-cols-3 lg:gap-3.6">
      {featureSectionItems.map(
        ({ id, labelPrimary, labelSecondary, title, points }) => (
          <li key={id} className="min-w-0">
            <Card className="relative flex h-full min-h-68 w-full flex-col gap-0 p-0 sm:min-h-80 lg:min-h-88">

              <Image
                alt=""
                aria-hidden={true}
                className="z-0 object-cover object-center grayscale"
                fill
                loading="eager"
                sizes="(max-width: 1023px) 100vw, 33vw"
                src={imageById[id]}
                unoptimized
              />
              <div className="pointer-events-none absolute inset-0 z-10 bg-linear-to-t from-black via-black/80 to-black/10" />
              <div className="relative z-20 mt-auto flex flex-col">
                <CardHeader className="grid gap-2 rounded-none bg-transparent px-2.88 pt-2! pb-3! sm:px-4 sm:pt-2.5! sm:pb-3.5!">
                  <div className="flex flex-wrap gap-1.5">
                    <Badge className="h-auto rounded-md border border-[#cfcfcf] bg-[#f3f3f3] py-0.5 text-2.72 leading-none font-semibold tracking-[0.03em] text-[#111] uppercase hover:bg-[#e8e8e8] dark:hover:bg-[#e8e8e8]">
                      {labelPrimary}
                    </Badge>
                    <Badge className="h-auto rounded-md border border-[#cfcfcf] bg-[#f3f3f3] py-0.5 text-2.72 leading-none font-semibold tracking-[0.03em] text-[#111] uppercase hover:bg-[#e8e8e8] dark:hover:bg-[#e8e8e8]">
                      {labelSecondary}
                    </Badge>
                  </div>
                  <CardTitle className="m-0 min-h-[calc(1.03rem*1.28*2)] font-mono text-4.12 leading-[1.28] font-semibold tracking-[-0.015em] text-[#efefef] uppercase">
                    {title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-2.88 pt-0 pb-4 sm:px-4">
                  <ul className="fsv4-points m-0 grid list-none gap-0.88 p-0 font-mono text-2.92 leading-normal tracking-[0.025em] text-[#c8cccc] uppercase">
                    {points.map((point) => (
                      <li key={point}>{point}</li>
                    ))}
                  </ul>
                </CardContent>
              </div>
            </Card>
          </li>
        )
      )}
    </ul>
  )
}
```

### `registry/new-york/blocks/feature-section-v4/styles/feature-grid.css`

```css
.fsv4-points li {
  position: relative;
  padding-left: 0.92rem;
}

.fsv4-points li::before {
  content: "✶";
  position: absolute;
  left: 0;
  top: 0;
  color: #cfd3d3;
}
```

### `registry/new-york/blocks/feature-section-v4/lib/features.ts`

```ts
export type FeatureDefinition = {
  id: "cognitive-ai" | "global-reach" | "limitless-growth"
  labelPrimary: string
  labelSecondary: string
  title: string
  points: [string, string]
}

export const featureSectionItems: FeatureDefinition[] = [
  {
    id: "cognitive-ai",
    labelPrimary: "AI",
    labelSecondary: "Intelligence",
    title: "Cognitive AI Engine",
    points: ["Learns from every interaction", "Surfaces insights instantly"],
  },
  {
    id: "global-reach",
    labelPrimary: "Global",
    labelSecondary: "Scale",
    title: "Planetary-Scale Reach",
    points: ["Deploys across every region", "Connects teams worldwide"],
  },
  {
    id: "limitless-growth",
    labelPrimary: "Growth",
    labelSecondary: "Ambition",
    title: "Reach Beyond Limits",
    points: ["Built for what's next", "Grows with your vision"],
  },
]
```

### `public/images/blocks/feature-section-v4/image-1.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/feature-section-v4/image-3.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```

### `public/images/blocks/feature-section-v4/image-2.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```