Icon Feature Grid

Features 12

About

A two-column grid of icon cards with a serif section heading, used to present product features or capabilities with a subtle scroll-triggered entrance animation.

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

Code

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

Usage.tsx

import Content09 from "@/components/ui/content-09";

const items = [
  {
    title: "Modern Design",
    description:
      "Beautiful and contemporary UI components that make your projects stand out.",
    icon: "Palette",
  },
  {
    title: "Developer Experience",
    description:
      "Built with developers in mind. Easy to use, well documented, and highly customizable.",
    icon: "Code",
  },
  {
    title: "Community Driven",
    description:
      "Join thousands of developers contributing to make UI development better for everyone.",
    icon: "Users",
  },
  {
    title: "Fast Performance",
    description: "Optimized for speed and efficiency right out of the box.",
    icon: "Zap",
  },
];

export default function Content09Demo() {
  return (
    <Content09
      title="What we offer"
      description="Four focused capabilities, each with a clear icon, headline, and short explanation."
      variant="standard"
      animation="subtle"
      items={items}
    />
  );
}