Cards

MetrePay cards are the primary container for product information, payment options, and dashboard content. They use a flat-to-raised elevation pattern on hover.

---

Card Variants

Default Card (Flat)

Plan

Basic

$9.99/mo

Select

Plan

Pro

$29.99/mo

Select

The default card uses #FAFAFA background with no shadow. On hover it lifts to white with --mp-shadow-hover.

.product-card {
  background: #FAFAFA;              /* --mp-color-bg-card */
  border-radius: 10px;              /* --mp-radius-lg */
  padding: 24px;                    /* --mp-space-6 */
  transition: all 0.3s ease;
}

.product-card:hover {
  background: #FFFFFF;
  box-shadow: 0 8px 16px -4px rgba(10, 10, 10, 0.1);
  transform: translateY(-2px);
}

---

White Card (Raised)

Total collected

$12,450

↑ 12% vs last month

.card--white {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
}

---

Selectable Card (Payment Method)

💳

Credit / Debit Card

Visa, Mastercard, Amex

🏦

Bank Transfer

CBU / CVU

📱

QR Code

Mercado Pago, MODO

.payment-method {
  border: 1.5px solid #E5ECFB;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #FFFFFF;
  margin-bottom: 8px;
}

.payment-method:hover {
  border-color: #6E96FF;
  background: #EBF0FF;
}

.payment-method--selected {
  border-color: #6E96FF;
  background: #EBF0FF;
  font-weight: 600;
}

---

Checkout Summary Card

Used in the left panel of split checkout layouts:

<div style="background:linear-gradient(73deg,#6E96FF 20%,#5C0390 100%); border-radius:10px; padding:32px; color:white; font-family:'Cabin',sans-serif;">
  <p style="font-size:13px; opacity:0.8; margin:0 0 4px 0;">Monthly subscription</p>
  <p style="font-size:36px; font-weight:700; margin:0 0 4px 0;">$29.99</p>
  <p style="font-size:13px; opacity:0.7; margin:0 0 32px 0;">per month</p>

  <div style="border-top:1px solid rgba(255,255,255,0.2); padding-top:16px;">
    <div style="display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.1);">
      <span style="opacity:0.7;">Pro Plan</span>
      <span>$29.99</span>
    </div>
    <div style="display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.1);">
      <span style="opacity:0.7;">Tax</span>
      <span>$0.00</span>
    </div>
    <div style="display:flex; justify-content:space-between; font-size:15px; font-weight:700; padding:12px 0 0 0;">
      <span>Total</span>
      <span>$29.99</span>
    </div>
  </div>
</div>

---

Bulma Implementation

<!-- Product card -->
<div class="card" style="border-radius:10px; background:#FAFAFA; box-shadow:none; transition:all 0.3s ease;">
  <div class="card-content">
    <p class="title is-5" style="color:#333; font-family:'Cabin',sans-serif;">Pro Plan</p>
    <p class="title is-3" style="color:#6E96FF; font-family:'Cabin',sans-serif;">$29.99<small style="font-size:14px; color:#999; font-weight:400;">/mo</small></p>
    <button class="button is-primary is-fullwidth" style="border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
      Select Plan
    </button>
  </div>
</div>

---

Rules

Card rules

• Default cards use #FAFAFA background with no shadow
• White cards use #FFFFFF with --mp-shadow-card
• Always use border-radius: 10px for card containers
• Card hover: lift translateY(-2px) + --mp-shadow-hover + white background
• Selectable cards use border: 1.5px solid — blue when selected
• Never use heavy borders on cards — use background color difference instead
• Card padding: 24px on mobile, 32px on desktop