Use Case Card Grid

Solutions

Tailored for Your Needs

Explore how our platform adapts to different industries and use cases to deliver maximum value.

Startup workspace

Startups

Launch faster with pre-built templates, automated workflows, and scalable infrastructure that grows with your business.

  • Quick setup in minutes
  • Scalable from day one
  • Cost-effective pricing
Enterprise building

Enterprise

Enterprise-grade security, compliance, and customization options for large organizations with complex requirements.

  • SOC 2 compliant
  • Unlimited team members
  • 24/7 priority support
Agency workspace

Agencies

Manage multiple client projects, collaborate with teams, and deliver stunning results on time, every time.

  • Multi-project management
  • Client collaboration
  • White-label options
About this block

Use Case Card GridFREE

Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments.

UseCase2: Use Case Card Grid

Responsive card grid for pitching a product at different audiences: each card pairs a 16:9 hover-zoom image with a title, description, and a checklist of feature bullets. The grid runs two or three columns.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

Installation

Radix flavor

bash
npx shadcn add "https://ui.beste.co/r/usecase2"

Base UI flavor

bash
npx shadcn add "https://ui.beste.co/r-base/usecase2"

This installs the block to components/beste/block/usecase2.tsx and the badge shadcn/ui primitive it depends on.

Quick start

The installed file exports usecase2Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

tsx
import { UseCase2, usecase2Demo } from "@/components/beste/block/usecase2";

export default function Page() {
  return <UseCase2 {...usecase2Demo} />;
}

Then replace the demo with your own props. Written out, the same setup looks like this:

tsx
import { UseCase2 } from "@/components/beste/block/usecase2";

export default function Page() {
  return (
    <UseCase2
      badge={{ label: "Solutions", variant: "secondary" }}
      heading="Tailored for Your Needs"
      description="Explore how our platform adapts to different industries."
      columns={2}
      items={[
        {
          id: "startup",
          title: "Startups",
          description: "Launch faster with pre-built templates and scalable infrastructure.",
          image: { src: "https://images.unsplash.com/photo-1497366216548-37526070297c", alt: "Startup workspace" },
          features: [
            { id: "f1", text: "Quick setup in minutes" },
            { id: "f2", text: "Scalable from day one" },
          ],
        },
        {
          id: "enterprise",
          title: "Enterprise",
          description: "Security, compliance, and customization for large organizations.",
          image: { src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2", alt: "Enterprise building" },
          features: [{ id: "f3", text: "SOC 2 compliant" }],
        },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string; variant?: "default" | "secondary" | "outline" }–Pill shown above the heading; omitted when badge.label is falsy
headingstring–Section heading
descriptionstring–Section intro text
itemsUseCaseItem[]–Cards rendered in the grid
columns2 | 33Grid column count at md/lg
classNamestring–Extra classes for the outer <section>
ts
type UseCaseItem = {
  id: string;
  title: string;
  description: string;
  image?: { src: string; alt: string };
  features?: UseCaseFeature[];
};

type UseCaseFeature = { id: string; text: string };

Behavior notes

  • columns={2} renders md:grid-cols-2; any other value (including the default 3) renders md:grid-cols-2 lg:grid-cols-3, so the grid is always single-column below md regardless of the prop.
  • Each card's image scales to 105% on hover (group-hover/usecase2:scale-105) inside an overflow-hidden wrapper, driven by the group/usecase2 named group on the card root.
  • The image block, and the features list, are each conditionally rendered only when present, so a card with no image collapses to just title, description, and (if given) the checklist.
  • Feature bullets use a Check icon from lucide-react in text-primary, not a custom bullet character.

More Use Case blocks

View all Use Case
PRO

usecase37

Detailed Feature Cards

Two-column grid of feature cards with icons, extended descriptions, and bullet point highlights. Perfect for comprehensive product feature or capability explanations.

PRO

usecase17

Hover Reveal Cards

Card grid with background images that reveals detailed content on hover via smooth slide-up animation. Perfect for destination showcases or visual feature galleries.

FREE

usecase4

Industry Solutions Grid

Card grid showcasing industry-specific solutions with icons, images, descriptions, and feature tags. Perfect for highlighting how your platform serves different verticals.

PRO

usecase41

Role Use Case Cards

A use-case section with an eyebrow over a hairline rule, a two-column heading, and three bordered role cards with an icon chip, a role label, a title, a description, and an arrow link.

PRO

usecase18

Industry Stats Cards

Card grid showcasing industries with icons, descriptions, and key statistics like company count and user numbers. Perfect for demonstrating market reach across verticals.

PRO

usecase1

Interactive Tab Showcase

Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product.