HTML/CSS
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/stacked-resource-cardUsage (with your settings)
A compact React example generated from this template data.
import "./stacked-resource-card.css"; export function StackedResourceCard() { return ( <article className="sk-metric-card"> <span>Core Web Vitals</span> <strong>98</strong> <p>Performance score after launch tuning.</p> </article> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<article class="sk-metric-card"> <span>Core Web Vitals</span> <strong>98</strong> <p>Performance score after launch tuning.</p></article>.sk-metric-card { width: min(100%, 320px); border: 1px solid rgba(213,171,255,.16); border-radius: 8px; padding: 1.25rem; color: #f8f8ff; background: linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%), rgba(9,13,20,.82);} .sk-metric-card strong { display: block; margin: .45rem 0; font: 800 4rem/1 Sora, Inter, sans-serif;}import "./stacked-resource-card.css"; export function StackedResourceCard() { return ( <article className="sk-metric-card"> <span>Core Web Vitals</span> <strong>98</strong> <p>Performance score after launch tuning.</p> </article> );}---// Stacked Resource Card--- <article class="sk-metric-card"> <span>Core Web Vitals</span> <strong>98</strong> <p>Performance score after launch tuning.</p></article> <style>.sk-metric-card { width: min(100%, 320px); border: 1px solid rgba(213,171,255,.16); border-radius: 8px; padding: 1.25rem; color: #f8f8ff; background: linear-gradient(135deg, rgba(213,171,255,.14), transparent 44%), rgba(9,13,20,.82);} .sk-metric-card strong { display: block; margin: .45rem 0; font: 800 4rem/1 Sora, Inter, sans-serif;}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Stacked Resource Card component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A layered resource card for downloads, templates, and lead magnets.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Useful internal-link block
Scales in a grid
Keeps visual hierarchy tight