Card Grid

A grid of question cards, each holding one query and its answer inline. Lays out frequent questions clearly so visitors find what they need at a glance.

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  ArrowRight,
  BarChart,
  Users,
  Zap,
  Shield,
  CreditCard,
  HeartHandshake,
} from 'lucide-react';

const faqs = [
  {
    question: 'How do I get started?',
    answer:
      "Sign up for a free account and follow our quick onboarding process. You'll be up and running in less than 5 minutes.",
    icon: <Zap className="h-5 w-5" />,
    badge: 'Popular',
    link: '#',
  },
  {
    question: 'What security measures do you have?',
    answer:
      'We use bank-level encryption, two-factor authentication, and regular security audits to keep your data safe.',
    icon: <Shield className="h-5 w-5" />,
    link: '#',
  },
  {
    question: 'How does team collaboration work?',
    answer:
      'Invite team members via email, set permissions, and start collaborating in real-time on shared projects and documents.',
    icon: <Users className="h-5 w-5" />,
    link: '#',
  },
  {
    question: 'Do you offer analytics?',
    answer:
      'Yes, all plans include basic analytics. Premium plans offer advanced insights, custom reports, and data export options.',
    icon: <BarChart className="h-5 w-5" />,
    link: '#',
  },
  {
    question: 'What payment methods do you accept?',
    answer:
      'We accept all major credit cards, PayPal, and wire transfers for enterprise plans. All payments are processed securely.',
    icon: <CreditCard className="h-5 w-5" />,
    link: '#',
  },
  {
    question: 'What is your refund policy?',
    answer:
      "We offer a 30-day money-back guarantee. If you're not satisfied, contact our support team for a full refund.",
    icon: <HeartHandshake className="h-5 w-5" />,
    badge: 'New',
    link: '#',
  },
];

export default function CardGrid() {
  return (
    <div className="relative container mx-auto max-w-[85rem] px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      {/* Title */}
      <div className="mx-auto mb-14 max-w-2xl text-center">
        <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
          Questions? We&apos;ve got answers
        </h2>
        <p className="text-muted-foreground mt-4">
          Browse our most common questions or contact our support team for
          personalized help
        </p>
      </div>
      {/* End Title */}

      {/* Card Grid */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        {faqs.map((faq, index) => (
          <Card
            key={index}
            className="bg-background/80 overflow-hidden border backdrop-blur-sm transition-shadow duration-200 hover:shadow-md"
          >
            <CardHeader className="space-y-0 pb-3">
              <div className="flex items-start justify-between">
                <div className="bg-muted inline-flex h-10 w-10 items-center justify-center rounded-lg">
                  {faq.icon}
                </div>
                {faq.badge && (
                  <Badge variant="secondary" className="ml-auto">
                    {faq.badge}
                  </Badge>
                )}
              </div>
              <CardTitle className="mt-4 text-xl">{faq.question}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">{faq.answer}</p>
            </CardContent>
            <CardFooter>
              <a href={faq.link} className="w-full">
                <Button
                  variant="ghost"
                  className="group w-full justify-between"
                >
                  <span>Learn more</span>
                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Button>
              </a>
            </CardFooter>
          </Card>
        ))}
      </div>
      {/* End Card Grid */}

      {/* CTA */}
      <div className="mt-14 text-center">
        <p className="text-muted-foreground mb-4">Still have questions?</p>
        <a href="#">
          <Button size="lg">Contact Support</Button>
        </a>
      </div>
      {/* End CTA */}
    </div>
  );
}

About this block

Card Grid opens with a centered heading and a short subtitle, then lays out six FAQ entries in a responsive three column grid. Each card holds a square icon container at the top left, an optional badge at the top right, a question as the card title, the answer text in the body, and a full width ghost button with a right arrow in the footer. Two cards carry badges out of the box ("Popular" and "New") so frequent or recently added entries can be called out. Below the grid a short closing note and a "Contact Support" button give visitors a next step if none of the cards answered their question.

Every part is independent. You can swap the six icons for any set that matches your topics, add or remove cards, hide the badges on any card, and rewrite the heading, subtitle, and closing prompt. The contact button links wherever your support flow lives.

When to use

Reach for this block on a product or store page where you want FAQ content to read as a browsable reference rather than a collapsible list. For an ecommerce storefront the grid format lets shoppers scan returns, shipping, payment, and sizing topics at once without expanding anything, which suits customers who already have a specific question in mind. It works better than an accordion when you have a short, well defined set of questions and want each answer fully visible on load.

A natural flow around it on a Marketing (Legacy) page:

Before

A pricing section so shoppers who just reviewed plans can immediately resolve common billing questions
A feature section that introduces the product before questions about it arise

After

A contact section for visitors whose question was not covered by the grid
A CTA section to convert readers who feel confident after scanning the answers

What you can display

Each card is a self contained question and answer unit, so the topics can span as many areas as you need. A few strong fits for a storefront context:

Order and returns. Use the card format to show return windows, exchange rules, and refund timelines side by side so buyers decide with confidence before checkout.
Shipping and delivery. Lay out carrier options, estimated times, and international availability in separate cards so each topic gets space without crowding the others.
Payment and security. Group accepted methods, fraud protection, and data handling into cards that give security conscious shoppers quick, visible reassurance.

Tip: keep every answer to two or three sentences so all cards stay close to the same height and the grid reads as a tidy, uniform set.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A pricing section so shoppers who just reviewed plans can immediately resolve common billing questions
A feature section that introduces the product before questions about it arise

After

A contact section for visitors whose question was not covered by the grid
A CTA section to convert readers who feel confident after scanning the answers

What you can display

Each card is a self contained question and answer unit, so the topics can span as many areas as you need. A few strong fits for a storefront context:

Order and returns. Use the card format to show return windows, exchange rules, and refund timelines side by side so buyers decide with confidence before checkout.
Shipping and delivery. Lay out carrier options, estimated times, and international availability in separate cards so each topic gets space without crowding the others.
Payment and security. Group accepted methods, fraud protection, and data handling into cards that give security conscious shoppers quick, visible reassurance.

Tip: keep every answer to two or three sentences so all cards stay close to the same height and the grid reads as a tidy, uniform set.

Card 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