| 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:
- Outer holder — neutral cream/off-white border (slab plastic)
- Label strip — brand-colored top strip (grader label)
- Card image — central, dominant element
- Grade/info — text below image (slab grade)
- Cert number/tagline — small bottom text
- 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
- Product cards on marketplace
- Pricing tier displays
- Testimonial cards (with portrait)
- Demo card previews
- Featured artist/contributor showcases
- NOT for primary UI (too decorative for functional buttons)
Where this fits in the X3 empire
Brand-signature component for CardPrepAI throughout.