Card Base

Approved (0)

Content/Post Cards

Blog Post Card

Article preview with title and excerpt

Preview

Design5 min read

Crafting Beautiful Interfaces

Learn the principles of modern UI design and create stunning digital experiences...

Sarah Chen

Jan 15, 2025

Code

export function BlogPostCard() {
        return (
        <div 
        className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl overflow-hidden transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
        >
        <div className="h-40 cb-accent-grad" />
        <div className="p-6">
         <div className="flex gap-2 mb-3">
           <span className="text-xs font-semibold px-3 py-1 rounded-full cb-sticker">Design</span>
           <span className="text-xs text-gray-500 dark:text-gray-400">5 min read</span>
         </div>
         <h3 className="text-lg font-bold text-gray-900 dark:text-white">Crafting Beautiful Interfaces</h3>
         <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">Learn the principles of modern UI design and create stunning digital experiences...</p>
         <div className="flex items-center gap-3 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
           <div className="w-8 h-8 rounded-full cb-accent-grad" />
           <div className="text-xs">
             <p className="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
             <p className="text-gray-500 dark:text-gray-400">Jan 15, 2025</p>
           </div>
         </div>
        </div>
        </div>
        );
        }

Profile/Identity Cards

User Profile Card

Identity and bio display

Preview

Cat portrait

Alex Morgan

Product Designer

DesignUI/UX

Code

export function UserProfileCard() {
        return (
        <div 
        className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
        >
        <div className="w-20 h-20 rounded-full cb-accent-grad mb-4 shadow-lg" />
        <h3 className="text-lg font-bold text-gray-900 dark:text-white">Alex Morgan</h3>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Product Designer</p>
        <div className="flex gap-2 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 w-full justify-center">
         <span className="text-xs px-3 py-1 rounded-full cb-sticker">Design</span>
         <span className="text-xs px-3 py-1 rounded-full cb-sticker-grad">UI/UX</span>
        </div>
        </div>
        );
        }

Dashboard/Data Cards

Metrics Card

KPI and analytics display

Preview

Total Users

12,458

↑ 12.5% this month

Code

export function MetricsCard() {
        return (
        <div 
          className="w-full max-w-xs bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
        >
          <div className="w-12 h-12 rounded-xl cb-accent-grad flex items-center justify-center mb-4">
            <BarChart3 className="w-6 h-6 text-white" />
          </div>
          <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-2">Total Users</p>
          <p className="text-4xl font-bold text-gray-900 dark:text-white">12,458</p>
          <p className="text-xs text-green-600 dark:text-green-400 mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 w-full">↑ 12.5% this month</p>
        </div>
        );
        }

Testimonial/Review Cards

Review Card

Customer feedback and ratings

Preview

"Exceeded all my expectations!"

Sarah M.

Product Manager

Code

export function ReviewCard() {
        return (
        <div 
        className="w-full max-w-xs bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
        >
        <p className="text-sm italic text-gray-900 dark:text-white mb-4 leading-relaxed">"Exceeded all my expectations!"</p>
        <div className="pt-4 border-t border-gray-200 dark:border-gray-700 w-full">
          <p className="text-xs font-semibold text-gray-600 dark:text-gray-400">Sarah M.</p>
          <p className="text-xs text-gray-500 dark:text-gray-500">Product Manager</p>
        </div>
        </div>
        );
        }

Action/Task Cards

Task Card

Action items and to-dos

Preview

Complete Project

Due today

Code

export function TaskCard() {
      return (
      <div className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-6 transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
      >
      <div className="flex items-start gap-3">
        <input type="checkbox" className="rounded accent-purple-500" />
        <div className="flex-1">
          <p className="font-semibold text-gray-900 dark:text-white">Complete Project</p>
          <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Due today</p>
        </div>
      </div>
      </div>
      );
      }

Collection/Aggregation Cards

Collection Card

Grouped content display

Preview

Collection

Code

export function CollectionCard() {
      return (
      <div className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
      >
      <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Collection</h3>
      <div className="grid grid-cols-3 gap-2 w-full max-w-[120px]">
        {[1,2,3,4,5,6].map(i => <div key={i} className="h-6 cb-accent-grad rounded-lg" />)}
      </div>
      </div>
      );
      }

Text-Heavy Cards

Content Card

Rich text and detailed information

Preview

Title

Detailed description with multiple lines of text content...

Code

export function ContentCard() {
      return (
      <div className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
      >
      <h3 className="font-semibold mb-3 text-gray-900 dark:text-white">Title</h3>
      <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">Detailed description with multiple lines of text content...</p>
      </div>
      );
      }

Icon-Based Cards

Feature Card

Icon and feature highlight

Preview

Premium Feature

Code

export function FeatureCard() {
      return (
      <div className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-between text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
      >
      <div className="flex-1 flex flex-col items-center justify-center">
        <Star className="w-8 h-8 cb-accent-text mb-3" />
        <p className="text-sm font-semibold text-gray-900 dark:text-white">Premium Feature</p>
      </div>
      <Button
        variant="outline"
        size="sm"
        className="rounded-full text-xs text-gray-900 dark:text-white font-semibold"
      >
        Learn More
      </Button>
      </div>
      );
      }

Info Cards

Info Card

Informational alert and notices

Preview

Info

Important information

Code

export function InfoCard() {
      return (
      <div className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-center text-center transition-all duration-200 hover:scale-[1.02] cursor-pointer cb-accent-glow"
      >
      <Info className="w-8 h-8 cb-accent-text mb-3" />
      <p className="text-sm font-semibold cb-accent-text mb-2">Info</p>
      <p className="text-xs text-gray-600 dark:text-gray-400">Important information</p>
      </div>
      );
      }

Photo Cards

Photo Gallery Card

Photo-focused presentation

Preview

Mountain Vista

Code

export function PhotoCard() {
        return (
        <div
        className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl aspect-square flex flex-col items-center justify-between overflow-hidden transition-all duration-200 hover:scale-[1.02] cursor-pointer relative cb-accent-glow"
        style={{
        backgroundImage:
         "url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=500&fit=crop)",
        backgroundSize: "cover",
        backgroundPosition: "center",
        }}
        >
        {/* Top glass fade */}
        <div className="absolute top-[-5px] left-[-5px] right-[-5px] h-[calc(20%+10px)] bg-gradient-to-b from-white/40 to-transparent dark:from-black/40" />

        {/* Bottom pill sticker label */}
        <div className="absolute bottom-4 left-4 right-4 flex items-center">
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full cb-sticker backdrop-blur-md shadow-sm">
         <p className="text-xs font-medium">
           Mountain Vista
         </p>
        </div>
        </div>
        </div>
        );
        }

Shop/Product Cards

Product Card

E-commerce product display

Preview

My Product

My Product

Premium edition

$99.99

Code

export function ProductCard() {
  const [isAdded, setIsAdded] = React.useState(false);

  return (
  <div
  className="bg-white/30 dark:bg-gray-800/30 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 aspect-square flex flex-col items-center justify-between transition-all duration-200 hover:scale-[1.02] cursor-pointer relative cb-accent-glow"
  >
  <div className="flex flex-col items-center flex-1 justify-center">
  <div className="w-16 h-16 rounded-xl cb-accent-grad mb-4 shadow-lg" />
  <h3 className="text-lg font-bold text-gray-900 dark:text-white">Product Name</h3>
  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Premium edition</p>
  </div>

  <div className="flex items-center justify-between w-full pt-4 border-t border-gray-200 dark:border-gray-700">
  <p className="text-lg font-bold text-gray-900 dark:text-white">$99.99</p>
  <button
    onClick={() => setIsAdded(!isAdded)}
    className="p-2 rounded-full cb-sticker-solid hover:opacity-90 transition-all"
  >
    {isAdded ? (
      <CheckCircle2 className="w-5 h-5" />
    ) : (
      <ShoppingCart className="w-5 h-5" />
    )}
  </button>
  </div>
  </div>
  );
  }