uğur sözen

Icon-Centered Grid Cards

Features

About

A responsive feature section with a 3-column grid of centered cards, each showing a large icon, title, and short description, with an optional badge, heading, and call-to-action buttons.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Icon-Centered Grid Cards to your project and fits it to your theme.

Code

How Icon-Centered Grid Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature107, feature107Demo } from "@/components/ui/feature107";

export default function DemoFeature107() {
  return <Feature107 {...feature107Demo} />;
}

Dependencies

More by uğur sözen

View all
  • Worth Keeping CTA

    Worth Keeping CTA

    245
  • Comparison Slider with Highlights

    Comparison Slider with Highlights

    208
  • Before/After Image Slider

    Before/After Image Slider

    131
  • Invoice History Table

    Invoice History Table

    96
  • Recipe Card

    Recipe Card

    42
  • Shop by Category Grid

    Shop by Category Grid

    41
  • PIN Keypad Unlock

    PIN Keypad Unlock

    41
  • Trigger to Action

    Trigger to Action

    35

More in Features

View all
  • Grid Feature Cards

    Grid Feature Cards

    1.9K
  • Features 4

    Features 4

    392
  • Features 8

    Features 8

    3.2K
  • Feature 1

    Feature 1

    118
  • Feature Sections

    Feature Sections

    191
  • Feature 72

    Feature 72

    135
  • Features Card

    Features Card

    253
  • Feature with image

    Feature with image

    153