cards

Card 6

A card with image, badge, description, and CTA button. From Cnippet UI.

Inspired by Cnippet UI · View source

Preview

Trending

Featured

Simplifying your workflow from day one. Manage your tasks, projects, and team in one place.

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

npx shadcn@latest add @cnippet/v-card-6

Paste into a terminal — or paste into a Lovable chat and I'll run it for you.

Source files

components/ui/v-card-6.tsx

import { ArrowRightIcon, BellIcon, SparklesIcon } from "lucide-react";
import { Badge } from "./badge";
import { Button } from "./button";
import { Card, CardContent } from "./card";

export function VCard6() {
  return (
    <Card className="w-full max-w-xs">
      <CardContent className="flex flex-col gap-4">
        <div className="relative h-48 w-full overflow-hidden rounded-lg">
          <img
            alt="16:9"
            className="h-full w-full object-cover"
            src="https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg"
          />
        </div>

        <div className="flex items-center justify-between gap-5">
          <Badge variant="outline">
            <BellIcon aria-hidden="true" />
            Trending
          </Badge>
          <div className="flex items-center gap-1">
            <SparklesIcon aria-hidden="true" />
            <span className="font-medium text-secondary-foreground text-xs">
              Featured
            </span>
          </div>
        </div>

        <p className="text-foreground text-sm">
          Simplifying your workflow from day one. Manage your tasks, projects,
          and team in one place.
        </p>

        <Button>
          Get Started
          <ArrowRightIcon aria-hidden="true" />
        </Button>
      </CardContent>
    </Card>
  );
}

export default VCard6;

Dependencies

@base-ui/reactclass-variance-authority