Verification Card

Installation

Usage

import { VerificationCard } from "@/components/ruixen/verification-card";
 
export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-muted/30">
      <VerificationCard
        backgroundImage="https://example.com/card-background.jpg"
        idNumber="**** **** **** 7421"
        name="JOHN DOE"
        validThru="07/31"
        label="VERIFICATION CARD"
      />
    </div>
  );
}

Props

Features

• Smooth Animation: Entrance animation with opacity and slide effects
• Custom Background: Support for any background image URL
• Realistic Design: Credit card-style layout with proper proportions
• Overlay Protection: Semi-transparent overlay ensures text readability
• Responsive: Maintains aspect ratio across different screen sizes
• Customizable Content: All text fields can be customized

Card Design Elements

The verification card includes:

• Header Section: Card label and validity status
• Main Content: ID number with prominent display
• Footer Section: Name and expiry date
• Background Overlay: 50% opacity black overlay for text contrast
• Rounded Corners: Modern card appearance with rounded borders

Animation Details

The card uses Framer Motion for smooth animations:

• Initial State: Positioned 20px above and fully transparent
• Final State: Normal position with full opacity
• Duration: 0.5 seconds with easeOut timing
• Trigger: Animates immediately on mount

Styling Customization

Custom Dimensions

// The card has fixed dimensions for realistic proportions
// Height: 208px (h-52)
// Width: 320px (w-80)
// Padding: 24px (p-6)

Custom Colors

// Modify the overlay opacity in your CSS
.bg-black/50 {
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
}

Use Cases

• Identity Verification: Display user identity cards
• Membership Cards: Show membership or loyalty cards
• Access Cards: Employee or student ID cards
• Digital Wallets: Virtual card representations
• Profile Displays: User profile card components
• Authentication: Visual identity confirmation

Examples

Employee ID Card

<VerificationCard
  backgroundImage="/company-logo-bg.jpg"
  idNumber="EMP **** 1234"
  name="ALICE SMITH"
  validThru="12/25"
  label="EMPLOYEE ID"
/>

Membership Card

<VerificationCard
  backgroundImage="/premium-member-bg.jpg"
  idNumber="MEM **** 5678"
  name="BOB JOHNSON"
  validThru="06/24"
  label="PREMIUM MEMBER"
/>

Student ID

<VerificationCard
  backgroundImage="/university-bg.jpg"
  idNumber="STU **** 9012"
  name="CAROL DAVIS"
  validThru="05/26"
  label="STUDENT ID"
/>