slab-card-components

name	slab-card-components
description	Use when designing card components that should feel like physical objects. Slab-card components feel like graded card holders — bordered, layered, displayed.

Slab-Card Components

Slab-card components = digital UI inspired by physical graded slabs. Used for: product cards, pricing tiers, testimonials, demo placeholders.

Slab-card anatomy

Like a physical slab:

1. Outer holder — neutral cream/off-white border (slab plastic)
2. Label strip — brand-colored top strip (grader label)
3. Card image — central, dominant element
4. Grade/info — text below image (slab grade)
5. Cert number/tagline — small bottom text
6. Edge highlight — subtle gloss line for slab feel

CSS implementation sketch

<div class='slab-card'>
  <div class='slab-label'>PSA 10 · MINT</div>
  <div class='slab-image'><img /></div>
  <div class='slab-info'>
    <strong>2018 Topps Chrome Acuña Jr</strong>
    <small>Cert #04219357</small>
  </div>
</div>

Styling: cream outer, accent label bar, ink body, slight box-shadow for slab depth.

When to use slab style

1. Product cards on marketplace
2. Pricing tier displays
3. Testimonial cards (with portrait)
4. Demo card previews
5. Featured artist/contributor showcases
6. NOT for primary UI (too decorative for functional buttons)

Where this fits in the X3 empire

Brand-signature component for CardPrepAI throughout.