Value Card

Cards

About

Single value card with circular icon, title, and description. Used in 'why us' grids. Subtle hover border highlight, suitable for 2-4 column grids.

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

Code

How Value Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Sparkles, Clock, HeartHandshake, ThumbsUp } from 'lucide-react'
import ValueCard from '@/components/ui/valuecard'

export default function Demo() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-8 bg-slate-50 max-w-6xl mx-auto">
      <ValueCard
        icon={Sparkles}
        title="Vakmanschap"
        description="3 generaties ervaring in schilder- en timmerwerk — wij weten wat werkt."
      />
      <ValueCard
        icon={Clock}
        title="Betrouwbaar"
        description="Heldere planning, vaste prijzen en we komen onze afspraken na."
      />
      <ValueCard
        icon={HeartHandshake}
        title="Persoonlijk"
        description="Eén vast aanspreekpunt voor uw hele project — geen callcenters."
      />
      <ValueCard
        icon={ThumbsUp}
        title="Garantie"
        description="5 jaar garantie op schilderwerk en volledige ondersteuning na oplevering."
      />
    </div>
  )
}