Service Cards Grid

A responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.

import {
  ArrowRight,
  Code,
  Palette,
  LineChart,
  Globe,
  MessageSquare,
  Zap,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

// Sample services data
const services = [
  {
    id: 1,
    title: 'Web Development',
    description:
      'Custom websites and web applications built with modern technologies focused on performance and usability.',
    icon: <Code className="text-primary h-10 w-10" />,
    link: '#',
  },
  {
    id: 2,
    title: 'UI/UX Design',
    description:
      'User-centered design solutions that create intuitive, engaging experiences that delight your users.',
    icon: <Palette className="text-primary h-10 w-10" />,
    link: '#',
  },
  {
    id: 3,
    title: 'Digital Marketing',
    description:
      'Data-driven marketing strategies to increase your online visibility and drive qualified traffic.',
    icon: <LineChart className="text-primary h-10 w-10" />,
    link: '#',
  },
  {
    id: 4,
    title: 'SEO Optimization',
    description:
      'Technical and content optimization to improve your search engine rankings and organic traffic.',
    icon: <Globe className="text-primary h-10 w-10" />,
    link: '#',
  },
  {
    id: 5,
    title: 'Content Creation',
    description:
      'Engaging, SEO-friendly content that resonates with your audience and drives conversions.',
    icon: <MessageSquare className="text-primary h-10 w-10" />,
    link: '#',
  },
  {
    id: 6,
    title: 'Performance Optimization',
    description:
      'Speed up your digital products for better user experience and improved conversion rates.',
    icon: <Zap className="text-primary h-10 w-10" />,
    link: '#',
  },
];

export default function ServiceCardsGrid() {
  return (
    <section className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4 2xl:max-w-[1400px]">
        {/* Section header */}
        <div className="mb-12 text-center md:mb-16">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Core Services
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
            Specialized solutions tailored to help your business thrive in the
            digital landscape.
          </p>
        </div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => (
            <Card
              key={service.id}
              className="hover:border-primary/30 transition-all duration-300 hover:shadow-md"
            >
              <CardHeader>
                <div className="mb-3">{service.icon}</div>
                <CardTitle className="text-xl">{service.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-sm">
                  {service.description}
                </p>
              </CardContent>
              <CardFooter>
                <Button variant="ghost" asChild className="group">
                  <a
                    href={service.link}
                    className="text-primary flex items-center"
                  >
                    <span className="mr-2">Learn more</span>
                    <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                  </a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

About this block

Service Cards Grid opens with a centered section header: a bold heading and a short supporting sentence. Below it sits a responsive three column grid where each cell is a card. Every card carries a large icon at the top, a title, a one or two sentence description, and a ghost button at the bottom that slides its arrow icon on hover. Six cards fill the default demo, arranged in two rows of three at wider viewports and collapsing to a single column on small screens.

Each card is independent, so you can add, remove, or reorder services without touching the others. The section header copy, the icon choice per card, and the "Learn more" link destination are all straightforward to swap out. The grid accommodates any multiple of three cards cleanly, and dropping to four or five cards works too since the grid reflows automatically.

When to use

Reach for this block on a services landing page or inside a portfolio site where visitors need a fast, parallel view of what you offer. It works particularly well for a product analytics SaaS that needs to show several distinct capability areas side by side without implying any ordering or hierarchy between them. The grid format lets a prospect scan all offerings in one pass, unlike an accordion that hides detail behind clicks or a numbered list that implies a sequence.

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce who you are before listing what you do
About And Skills for brief context on your background before the offering detail

After

Featured Work Highlights to back up the services with concrete examples
Quote And Feedback so client proof follows immediately after the capability overview

What you can display

Any set of parallel, non-hierarchical capabilities fits this grid well. A few directions worth considering:

Core product features. List your analytics platform's main modules so prospects understand the full scope before booking a demo.
Consulting practice areas. Show each discipline as a card so potential clients can spot the one relevant to their project quickly.
Support tier offerings. Present onboarding, integration, and ongoing support as separate cards so buyers see exactly what they get at each engagement level.

Tip: keep descriptions to two short sentences per card so the grid rows stay visually even and nothing feels cramped at narrower widths.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce who you are before listing what you do
About And Skills for brief context on your background before the offering detail

After

Featured Work Highlights to back up the services with concrete examples
Quote And Feedback so client proof follows immediately after the capability overview

What you can display

Any set of parallel, non-hierarchical capabilities fits this grid well. A few directions worth considering:

Core product features. List your analytics platform's main modules so prospects understand the full scope before booking a demo.
Consulting practice areas. Show each discipline as a card so potential clients can spot the one relevant to their project quickly.
Support tier offerings. Present onboarding, integration, and ongoing support as separate cards so buyers see exactly what they get at each engagement level.

Tip: keep descriptions to two short sentences per card so the grid rows stay visually even and nothing feels cramped at narrower widths.

Service Cards Grid

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display