Loyalty Card

Cards for loyalty programs, membership tiers, and rewards. Features gradient backgrounds, a shine effect on hover, tier color variants, progress bars, and multiple layout options.

Basic Loyalty Card

Preview

ACME Bronze

Available Points

2,450pts

Jane Cooper

ID: 8801-2345-6789

Valid thru

12/2027

<div style="max-width: 380px;">
  <div class="loyalty-card">
    <div class="loyalty-card-header">
      <span class="loyalty-card-logo" style="font-weight: bold; font-size: 1.1rem;">ACME</span>
      <span class="loyalty-card-tier">Bronze</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Available Points</div>
      <div class="loyalty-card-points">2,450<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-footer">
      <div class="loyalty-card-member">
        <div class="loyalty-card-member-name">Jane Cooper</div>
        <div class="loyalty-card-member-id">ID: 8801-2345-6789</div>
      </div>
      <div class="loyalty-card-expiry">
        <div class="loyalty-card-expiry-label">Valid thru</div>
        <div class="loyalty-card-expiry-date">12/2027</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width: 380px;">
  <div class="relative flex flex-col overflow-hidden text-white p-6 rounded-box min-h-[180px]" style="background: linear-gradient(135deg, #cd7f32, #b87333);">
    <div class="flex justify-between items-start mb-auto relative z-1">
      <span class="font-bold text-lg">ACME</span>
      <span class="text-xs font-bold uppercase tracking-wider rounded-full px-3 py-1" style="background: rgba(255,255,255,0.2); letter-spacing: 0.1em;">Bronze</span>
    </div>
    <div class="relative z-1 mt-auto">
      <div class="text-xs uppercase opacity-80" style="letter-spacing: 0.05em;">Available Points</div>
      <div class="font-bold text-[2rem] leading-tight mb-2">2,450<span class="font-normal opacity-80 text-base ml-1">pts</span></div>
    </div>
    <div class="flex justify-between items-end relative z-1 mt-4">
      <div class="text-sm">
        <div class="font-semibold">Jane Cooper</div>
        <div class="text-xs font-mono opacity-80">ID: 8801-2345-6789</div>
      </div>
      <div class="text-xs text-right">
        <div class="opacity-80">Valid thru</div>
        <div class="font-semibold">12/2027</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Hover shine effect is CSS-only (::before pseudo-element)
// No JavaScript required for the basic card

Tier Variants

Preview

REWARDS Bronze

Points

1,200

REWARDS Silver

Points

3,500

REWARDS Gold

Points

8,750

REWARDS Platinum

Points

15,200

REWARDS Diamond

Points

32,000

REWARDS VIP

Points

50,000

REWARDS Member

Points

5,000

<div class="flex flex-wrap gap-4">
  <!-- Bronze (default) -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-bronze">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Bronze</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">1,200</div>
      </div>
    </div>
  </div>

  <!-- Silver -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-silver">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Silver</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">3,500</div>
      </div>
    </div>
  </div>

  <!-- Gold -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-gold">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Gold</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">8,750</div>
      </div>
    </div>
  </div>

  <!-- Platinum -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-platinum">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Platinum</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">15,200</div>
      </div>
    </div>
  </div>

  <!-- Diamond -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-diamond">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Diamond</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">32,000</div>
      </div>
    </div>
  </div>

  <!-- VIP -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-vip">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">VIP</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">50,000</div>
      </div>
    </div>
  </div>

  <!-- Primary -->
  <div style="max-width: 280px; flex: 1;">
    <div class="loyalty-card loyalty-card-primary">
      <div class="loyalty-card-header">
        <span class="loyalty-card-logo" style="font-weight: bold;">REWARDS</span>
        <span class="loyalty-card-tier">Member</span>
      </div>
      <div class="loyalty-card-body">
        <div class="loyalty-card-points-label">Points</div>
        <div class="loyalty-card-points">5,000</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Tier variants change the gradient and text color via CSS custom property -->
<!-- Bronze: linear-gradient(135deg, #cd7f32, #b87333) — white text -->
<!-- Silver: linear-gradient(135deg, #c0c0c0, #a8a8a8) — dark text (#333) -->
<!-- Gold: linear-gradient(135deg, #ffd700, #daa520) — dark text (#333) -->
<!-- Platinum: linear-gradient(135deg, #e5e4e2, #c4c3c0) — dark text (#333) -->
<!-- Diamond: linear-gradient(135deg, #b9f2ff, #89cff0) — dark blue text (#1e3a5f) -->
<!-- VIP: linear-gradient(135deg, #1a1a2e, #16213e) — gold text (#ffd700) -->
<!-- Primary: uses --color-primary CSS variable — white text -->

Requires: tw.min.css

// No JS needed — tier styling is CSS only
// Apply tier class alongside .loyalty-card:
// <div class="loyalty-card loyalty-card-gold">...</div>

With Progress Bar

Preview

ACME Gold

Available Points

8,750pts

8,750 / 12,500 pts Platinum

Alex Johnson

ID: 4420-8899-1122

Valid thru

06/2028

<div style="max-width: 380px;">
  <div class="loyalty-card loyalty-card-gold">
    <div class="loyalty-card-header">
      <span class="loyalty-card-logo" style="font-weight: bold; font-size: 1.1rem;">ACME</span>
      <span class="loyalty-card-tier">Gold</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Available Points</div>
      <div class="loyalty-card-points">8,750<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-progress">
      <div class="loyalty-card-progress-bar">
        <div class="loyalty-card-progress-fill" style="width: 70%;"></div>
      </div>
      <div class="loyalty-card-progress-text">
        <span>8,750 / 12,500 pts</span>
        <span>Platinum</span>
      </div>
    </div>
    <div class="loyalty-card-footer">
      <div class="loyalty-card-member">
        <div class="loyalty-card-member-name">Alex Johnson</div>
        <div class="loyalty-card-member-id">ID: 4420-8899-1122</div>
      </div>
      <div class="loyalty-card-expiry">
        <div class="loyalty-card-expiry-label">Valid thru</div>
        <div class="loyalty-card-expiry-date">06/2028</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width: 380px;">
  <div class="relative flex flex-col overflow-hidden p-6 rounded-box min-h-[180px]" style="background: linear-gradient(135deg, #ffd700, #daa520); color: #333;">
    <div class="flex justify-between items-start mb-auto relative z-1">
      <span class="font-bold text-lg">ACME</span>
      <span class="text-xs font-bold uppercase tracking-wider rounded-full px-3 py-1" style="background: rgba(255,255,255,0.2); letter-spacing: 0.1em;">Gold</span>
    </div>
    <div class="relative z-1 mt-auto">
      <div class="text-xs uppercase opacity-80" style="letter-spacing: 0.05em;">Available Points</div>
      <div class="font-bold text-[2rem] leading-tight mb-2">8,750<span class="font-normal opacity-80 text-base ml-1">pts</span></div>
    </div>
    <div class="relative z-1 mt-4">
      <div class="w-full overflow-hidden h-1.5 rounded-full mb-2" style="background: rgba(255,255,255,0.2);">
        <div class="h-full rounded-full" style="width: 70%; background: rgba(255,255,255,0.9);"></div>
      </div>
      <div class="flex justify-between text-xs opacity-80">
        <span>8,750 / 12,500 pts</span>
        <span>Platinum</span>
      </div>
    </div>
    <div class="flex justify-between items-end relative z-1 mt-4">
      <div class="text-sm">
        <div class="font-semibold">Alex Johnson</div>
        <div class="text-xs font-mono opacity-80">ID: 4420-8899-1122</div>
      </div>
      <div class="text-xs text-right">
        <div class="opacity-80">Valid thru</div>
        <div class="font-semibold">06/2028</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Update progress bar width dynamically
function updateProgress(cardEl, current, target) {
  const pct = Math.min((current / target) * 100, 100);
  const fill = cardEl.querySelector('.loyalty-card-progress-fill');
  if (fill) fill.style.width = pct + '%';
}

Compact Variant

Preview

Silver

Points

3,500pts

Maria Lopez

VIP

Points

50,000pts

Carlos Reyes

<div style="max-width: 380px;">
  <div class="loyalty-card loyalty-card-compact loyalty-card-silver">
    <div class="loyalty-card-header">
      <span class="loyalty-card-tier">Silver</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Points</div>
      <div class="loyalty-card-points">3,500<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-member">
      <div class="loyalty-card-member-name">Maria Lopez</div>
    </div>
  </div>
</div>

<div style="max-width: 380px; margin-top: 1rem;">
  <div class="loyalty-card loyalty-card-compact loyalty-card-vip">
    <div class="loyalty-card-header">
      <span class="loyalty-card-tier">VIP</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Points</div>
      <div class="loyalty-card-points">50,000<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-member">
      <div class="loyalty-card-member-name">Carlos Reyes</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Compact: uses flex-row, reduced padding (1rem), smaller point size (1.5rem) -->
<!-- Combines with any tier variant class -->
<div class="relative flex flex-row items-center gap-4 overflow-hidden p-4 rounded-box" style="background: linear-gradient(135deg, #c0c0c0, #a8a8a8); color: #333;">
  <span class="text-xs font-bold uppercase tracking-wider rounded-full px-3 py-1" style="background: rgba(255,255,255,0.2);">Silver</span>
  <div class="relative z-1">
    <div class="text-xs uppercase opacity-80">Points</div>
    <div class="font-bold text-2xl leading-tight">3,500<span class="font-normal opacity-80 text-base ml-1">pts</span></div>
  </div>
  <div class="text-sm font-semibold">Maria Lopez</div>
</div>

Requires: tw.min.css

// No JS needed — compact layout is CSS only

Horizontal Variant

Preview

ACME Diamond

Available Points

32,000pts

Sophie Chen

ID: 7700-1234-5678

Valid thru

03/2029

<div style="max-width: 520px;">
  <div class="loyalty-card loyalty-card-horizontal loyalty-card-diamond">
    <div class="loyalty-card-header">
      <span class="loyalty-card-logo" style="font-weight: bold; font-size: 1.1rem;">ACME</span>
      <span class="loyalty-card-tier">Diamond</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Available Points</div>
      <div class="loyalty-card-points">32,000<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-footer">
      <div class="loyalty-card-member">
        <div class="loyalty-card-member-name">Sophie Chen</div>
        <div class="loyalty-card-member-id">ID: 7700-1234-5678</div>
      </div>
      <div class="loyalty-card-expiry">
        <div class="loyalty-card-expiry-label">Valid thru</div>
        <div class="loyalty-card-expiry-date">03/2029</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width: 520px;">
  <div class="relative flex flex-row items-center overflow-hidden rounded-box" style="padding: 1rem 1.5rem; background: linear-gradient(135deg, #b9f2ff, #89cff0); color: #1e3a5f;">
    <div class="flex flex-col items-start mr-6 relative z-1">
      <span class="font-bold text-lg">ACME</span>
      <span class="text-xs font-bold uppercase tracking-wider rounded-full px-3 py-1 mt-1" style="background: rgba(255,255,255,0.2);">Diamond</span>
    </div>
    <div class="relative z-1 flex-1">
      <div class="text-xs uppercase opacity-80">Available Points</div>
      <div class="font-bold text-[2rem] leading-tight">32,000<span class="font-normal opacity-80 text-base ml-1">pts</span></div>
    </div>
    <div class="ml-auto flex flex-col items-end relative z-1">
      <div class="text-sm">
        <div class="font-semibold">Sophie Chen</div>
        <div class="text-xs font-mono opacity-80">ID: 7700-1234-5678</div>
      </div>
      <div class="text-xs text-right mt-1">
        <div class="opacity-80">Valid thru</div>
        <div class="font-semibold">03/2029</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Horizontal layout stacks vertically on mobile (< 768px) via CSS
// No JS needed

Glass Variant

Preview

ACME Member

Available Points

5,200pts

5,200 / 10,000 pts Silver

Taylor Swift

ID: 1313-0000-8900

Valid thru

09/2027

<div style="max-width: 380px; background: linear-gradient(135deg, #667eea, #764ba2); padding: 2rem; border-radius: 1rem;">
  <div class="loyalty-card glass">
    <div class="loyalty-card-header">
      <span class="loyalty-card-logo" style="font-weight: bold; font-size: 1.1rem;">ACME</span>
      <span class="loyalty-card-tier">Member</span>
    </div>
    <div class="loyalty-card-body">
      <div class="loyalty-card-points-label">Available Points</div>
      <div class="loyalty-card-points">5,200<span class="loyalty-card-points-suffix">pts</span></div>
    </div>
    <div class="loyalty-card-progress">
      <div class="loyalty-card-progress-bar">
        <div class="loyalty-card-progress-fill" style="width: 52%;"></div>
      </div>
      <div class="loyalty-card-progress-text">
        <span>5,200 / 10,000 pts</span>
        <span>Silver</span>
      </div>
    </div>
    <div class="loyalty-card-footer">
      <div class="loyalty-card-member">
        <div class="loyalty-card-member-name">Taylor Swift</div>
        <div class="loyalty-card-member-id">ID: 1313-0000-8900</div>
      </div>
      <div class="loyalty-card-expiry">
        <div class="loyalty-card-expiry-label">Valid thru</div>
        <div class="loyalty-card-expiry-date">09/2027</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Glass variant: uses the .glass utility class -->
<!-- Removes gradient, shine, and radial overlays -->
<!-- Uses glass morphism (backdrop-blur + semi-transparent bg) -->
<!-- Text color becomes var(--color-base-content) -->
<!-- Progress bar fill uses var(--color-primary) instead of white -->
<div style="max-width: 380px; background: linear-gradient(135deg, #667eea, #764ba2); padding: 2rem; border-radius: 1rem;">
  <div class="relative flex flex-col overflow-hidden glass p-6 rounded-box min-h-[180px]" style="border: 1px solid rgba(255,255,255,0.18); color: var(--color-base-content);">
    <!-- Same internal structure as basic card -->
  </div>
</div>

Requires: tw.min.css

// Glass variant is CSS only — add the .glass class to .loyalty-card
// <div class="loyalty-card glass">...</div>

Classes Reference

Class	Description
`.loyalty-card`	Base card container. Bronze gradient by default, white text, min-height 180px, shine effect on hover.
`.loyalty-card-header`	Top area with logo and tier badge. Flexbox with space-between alignment.
`.loyalty-card-logo`	Logo image or text. Max 80px wide, 32px tall.
`.loyalty-card-tier`	Tier badge pill. Uppercase, small text, semi-transparent white background.
`.loyalty-card-body`	Main content area for points display. Pushed to bottom via mt-auto.
`.loyalty-card-points-label`	Small uppercase label above the points value.
`.loyalty-card-points`	Large bold points number (2rem).
`.loyalty-card-points-suffix`	Smaller text after points (e.g., "pts"). Normal weight, reduced opacity.
`.loyalty-card-footer`	Bottom area with member info and expiry. Flexbox with space-between.
`.loyalty-card-member`	Member info wrapper.
`.loyalty-card-member-name`	Member name. Semibold.
`.loyalty-card-member-id`	Member ID. Monospace, small, reduced opacity.
`.loyalty-card-expiry`	Expiry info wrapper. Right-aligned.
`.loyalty-card-expiry-label`	Expiry label text (e.g., "Valid thru"). Reduced opacity.
`.loyalty-card-expiry-date`	Expiry date value. Semibold.
`.loyalty-card-progress`	Progress section wrapper for next-tier tracking.
`.loyalty-card-progress-bar`	Progress bar track. 6px height, semi-transparent white background.
`.loyalty-card-progress-fill`	Progress bar fill. Set width via inline style (e.g., `style="width: 70%"`).
`.loyalty-card-progress-text`	Text below progress bar. Flex with space-between for current/target labels.
`.loyalty-card-qr`	QR code area. Positioned absolute at bottom-right, 60px square, white background.
Tier Variants
`.loyalty-card-bronze`	Bronze gradient (#cd7f32 to #b87333). White text. This is the default.
`.loyalty-card-silver`	Silver gradient (#c0c0c0 to #a8a8a8). Dark text (#333).
`.loyalty-card-gold`	Gold gradient (#ffd700 to #daa520). Dark text (#333).
`.loyalty-card-platinum`	Platinum gradient (#e5e4e2 to #c4c3c0). Dark text (#333).
`.loyalty-card-diamond`	Diamond gradient (#b9f2ff to #89cff0). Dark blue text (#1e3a5f).
`.loyalty-card-vip`	VIP gradient (#1a1a2e to #16213e). Gold text (#ffd700).
`.loyalty-card-primary`	Uses the theme's --color-primary variable. White text.
Layout Variants
`.loyalty-card-compact`	Compact single-row layout. Reduced padding (1rem), smaller points (1.5rem), no min-height.
`.loyalty-card-horizontal`	Horizontal layout with header, body, and footer side by side. Stacks on mobile.
`.loyalty-card.glass`	Glass morphism variant. Removes gradient/shine, uses backdrop-blur, inherits base content color. Progress fill uses --color-primary.