Cards

vel-src: card.css

Flexible card components with header, body, and footer slots, plus surface, border, hover, color, glass, gradient, and glow variants.

Class	Properties
vel-card	Base card — surface background, border, border-radius, overflow hidden
vel-card-header	Top section with border-bottom and padding
vel-card-body	Main content area with padding
vel-card-footer	Bottom section with border-top and padding
vel-card-flat	Removes box-shadow entirely
vel-card-elevated	Adds stronger box-shadow elevation
vel-card-filled	Slightly lighter surface fill
vel-card-hover	Lifts with translateY and shadow on :hover
vel-card-primary	Primary accent border-top
vel-card-success	Success accent border-top
vel-card-glass	Frosted-glass effect — blur + translucent background
vel-card-gradient	Gradient primary background
vel-card-glow	Primary glow box-shadow

Examples

Default card

Card Header

This is the main body content of the card. You can put anything here.

Card Footer

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-card" style="max-width:360px;">
    <div class="vel-card-header">Card Header</div>
    <div class="vel-card-body">This is the main body content of the card. You can put anything here.</div>
    <div class="vel-card-footer">Card Footer</div>
  </div>
</div>

Hover card

Hover over this card to see it lift.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-card vel-card-hover" style="max-width:360px;">
    <div class="vel-card-body">
      <p style="margin:0 0 1rem;color:#e2e8f0;">Hover over this card to see it lift.</p>
      <button class="vel-btn vel-btn-primary vel-btn-sm">Action</button>
    </div>
  </div>
</div>

Glass card

Glass card with blur and translucent background.

example.html

<div style="padding:24px;background:#0d1422;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-card vel-card-glass" style="max-width:360px;">
    <div class="vel-card-body">
      <p style="margin:0;color:#e2e8f0;">Glass card with blur and translucent background.</p>
    </div>
  </div>
</div>