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/metric-proof-cardUsage (with your settings)
A compact React example generated from this template data.
import "./metric-proof-card.css"; export function MetricProofCard() { 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 "./metric-proof-card.css"; export function MetricProofCard() { return ( <article className="sk-metric-card"> <span>Core Web Vitals</span> <strong>98</strong> <p>Performance score after launch tuning.</p> </article> );}---// Metric Proof 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 Metric Proof 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 trust-building metric card with a bold score and short proof note.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Great for service pages
Uses semantic article markup
Designed for scanability