|$ curl https://forge-ai.dev/api/markdown?path=docs/components/cards
$cat docs/cards.md
updated Recently·22 min read·published
Cards
Card Components
Cards are versatile containers for grouping related content and actions. This guide covers production-ready card patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including basic, horizontal, feature, pricing, testimonial, stat, grid, and interactive hover cards.
ℹ
info
Treat cards as self-contained units. Use a semantic <article> element when the card makes sense on its own, and keep heading levels in a logical order for screen-reader users.
Basic Card
A simple card with media area, title, description, badge, and action button. Uses subtle borders and a hover elevation effect.
basic-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <div class="card-media"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <rect x="3" y="3" width="18" height="18" rx="2"/> |
| 5 | <circle cx="8.5" cy="8.5" r="1.5"/> |
| 6 | <path d="M21 15l-5-5L5 21"/> |
| 7 | </svg> |
| 8 | </div> |
| 9 | <div class="card-body"> |
| 10 | <span class="card-badge"> |
| 11 | Featured |
| 12 | </span> |
| 13 | <h3 class="card-title"> |
| 14 | Card Title |
| 15 | </h3> |
| 16 | <p class="card-desc"> |
| 17 | A well-designed card groups related content and actions, making information scannable and actionable. |
| 18 | </p> |
| 19 | <button class="card-btn"> |
| 20 | Learn More |
| 21 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 22 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 23 | </svg> |
| 24 | </button> |
| 25 | </div> |
| 26 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:320px; |
| 15 | width:100%; |
| 16 | background:#111; |
| 17 | border:1px solid #222; |
| 18 | border-radius:12px; |
| 19 | overflow:hidden; |
| 20 | transition:all .3s ease |
| 21 | } |
| 22 | .card:hover { |
| 23 | border-color:#333; |
| 24 | box-shadow:0 8px 32px rgba(0, |
| 25 | 0, |
| 26 | 0, |
| 27 | .4); |
| 28 | transform:translateY(-2px) |
| 29 | } |
| 30 | .card-media { |
| 31 | height:160px; |
| 32 | display:flex; |
| 33 | align-items:center; |
| 34 | justify-content:center; |
| 35 | background:linear-gradient(135deg, |
| 36 | #1A1A2E, |
| 37 | #2A1A3E) |
| 38 | } |
| 39 | .card-media svg { |
| 40 | width:48px; |
| 41 | height:48px; |
| 42 | color:#00FF41 |
| 43 | } |
| 44 | .card-body { |
| 45 | padding:20px |
| 46 | } |
| 47 | .card-badge { |
| 48 | display:inline-block; |
| 49 | padding:3px 8px; |
| 50 | border-radius:4px; |
| 51 | font-size:10px; |
| 52 | font-weight:600; |
| 53 | background:rgba(0, |
| 54 | 255, |
| 55 | 65, |
| 56 | .1); |
| 57 | color:#00FF41; |
| 58 | margin-bottom:10px |
| 59 | } |
| 60 | .card-title { |
| 61 | font-size:16px; |
| 62 | font-weight:600; |
| 63 | color:#E0E0E0; |
| 64 | margin:0 0 8px 0 |
| 65 | } |
| 66 | .card-desc { |
| 67 | font-size:13px; |
| 68 | color:#808080; |
| 69 | margin:0 0 16px 0; |
| 70 | line-height:1.5 |
| 71 | } |
| 72 | .card-btn { |
| 73 | display:inline-flex; |
| 74 | align-items:center; |
| 75 | gap:6px; |
| 76 | padding:8px 16px; |
| 77 | border-radius:6px; |
| 78 | font-size:12px; |
| 79 | font-weight:600; |
| 80 | cursor:pointer; |
| 81 | background:#00FF41; |
| 82 | color:#0A0A0A; |
| 83 | border:none; |
| 84 | transition:all .2s |
| 85 | } |
| 86 | .card-btn:hover { |
| 87 | background:#00E63A |
| 88 | } |
| 89 | .card-btn svg { |
| 90 | width:14px; |
| 91 | height:14px |
| 92 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="max-w-[320px] w-full bg-[#111] border border-[#222] rounded-xl overflow-hidden transition-all duration-300 hover:border-[#333] hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)] hover:-translate-y-0.5"> |
| 3 | <div class="h-40 flex items-center justify-center bg-gradient-to-br from-[#1A1A2E] to-[#2A1A3E]"> |
| 4 | <svg class="w-12 h-12 text-[#00FF41]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <rect x="3" y="3" width="18" height="18" rx="2"/> |
| 6 | <circle cx="8.5" cy="8.5" r="1.5"/> |
| 7 | <path d="M21 15l-5-5L5 21"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="p-5"> |
| 11 | <span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-2.5"> |
| 12 | Featured |
| 13 | </span> |
| 14 | <h3 class="text-base font-semibold text-[#E0E0E0] mb-2"> |
| 15 | Card Title |
| 16 | </h3> |
| 17 | <p class="text-[13px] text-[#808080] leading-relaxed mb-4"> |
| 18 | A well-designed card groups related content and actions, making information scannable and actionable. |
| 19 | </p> |
| 20 | <button class="inline-flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-colors"> |
| 21 | Learn More |
| 22 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 23 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | </div> |
| 27 | </article> |
| 28 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary text-white" style="max-width:320px;width:100%;border-radius:12px;overflow:hidden;background:#111;border-color:#222"> |
| 3 | <div class="d-flex align-items-center justify-content-center" style="height:160px;background:linear-gradient(135deg,#1A1A2E,#2A1A3E)"> |
| 4 | <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <rect x="3" y="3" width="18" height="18" rx="2"/> |
| 6 | <circle cx="8.5" cy="8.5" r="1.5"/> |
| 7 | <path d="M21 15l-5-5L5 21"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="card-body"> |
| 11 | <span class="badge mb-2" style="background:rgba(0,255,65,0.1);color:#00FF41"> |
| 12 | Featured |
| 13 | </span> |
| 14 | <h5 class="card-title fw-semibold"> |
| 15 | Card Title |
| 16 | </h5> |
| 17 | <p class="card-text text-secondary" style="font-size:13px"> |
| 18 | A well-designed card groups related content and actions, making information scannable and actionable. |
| 19 | </p> |
| 20 | <button class="btn btn-success btn-sm fw-semibold d-inline-flex align-items-center gap-1" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;--bs-btn-hover-border-color:#00E63A"> |
| 21 | Learn More |
| 22 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 23 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 24 | </svg> |
| 25 | </button> |
| 26 | </div> |
| 27 | </article> |
| 28 | </div> |
Horizontal Card
Side-by-side layouts are ideal for search results, lists, or summaries where the media supports the content.
horizontal-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <div class="card-media"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <rect x="2" y="3" width="20" height="14" rx="2"/> |
| 5 | <line x1="8" y1="21" x2="16" y2="21"/> |
| 6 | <line x1="12" y1="17" x2="12" y2="21"/> |
| 7 | </svg> |
| 8 | </div> |
| 9 | <div class="card-body"> |
| 10 | <h3 class="card-title"> |
| 11 | Horizontal Card |
| 12 | </h3> |
| 13 | <p class="card-desc"> |
| 14 | Side-by-side layouts work great for lists, search results, or product summaries where the image supports the content. |
| 15 | </p> |
| 16 | <a href="#" class="card-link"> |
| 17 | Read case study |
| 18 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 19 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 20 | </svg> |
| 21 | </a> |
| 22 | </div> |
| 23 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:520px; |
| 15 | width:100%; |
| 16 | display:flex; |
| 17 | gap:16px; |
| 18 | background:#111; |
| 19 | border:1px solid #222; |
| 20 | border-radius:12px; |
| 21 | overflow:hidden; |
| 22 | transition:all .3s ease |
| 23 | } |
| 24 | .card:hover { |
| 25 | border-color:#333; |
| 26 | box-shadow:0 8px 32px rgba(0, |
| 27 | 0, |
| 28 | 0, |
| 29 | .4) |
| 30 | } |
| 31 | .card-media { |
| 32 | width:140px; |
| 33 | flex-shrink:0; |
| 34 | display:flex; |
| 35 | align-items:center; |
| 36 | justify-content:center; |
| 37 | background:linear-gradient(135deg, |
| 38 | #1A1A2E, |
| 39 | #0F0F23) |
| 40 | } |
| 41 | .card-media svg { |
| 42 | width:40px; |
| 43 | height:40px; |
| 44 | color:#00FF41 |
| 45 | } |
| 46 | .card-body { |
| 47 | padding:20px; |
| 48 | flex:1; |
| 49 | display:flex; |
| 50 | flex-direction:column; |
| 51 | justify-content:center |
| 52 | } |
| 53 | .card-title { |
| 54 | font-size:16px; |
| 55 | font-weight:600; |
| 56 | color:#E0E0E0; |
| 57 | margin:0 0 6px 0 |
| 58 | } |
| 59 | .card-desc { |
| 60 | font-size:12px; |
| 61 | color:#808080; |
| 62 | margin:0 0 14px 0; |
| 63 | line-height:1.5 |
| 64 | } |
| 65 | .card-link { |
| 66 | font-size:12px; |
| 67 | font-weight:600; |
| 68 | color:#00FF41; |
| 69 | text-decoration:none; |
| 70 | display:inline-flex; |
| 71 | align-items:center; |
| 72 | gap:4px |
| 73 | } |
| 74 | .card-link:hover { |
| 75 | color:#00E63A |
| 76 | } |
| 77 | .card-link svg { |
| 78 | width:14px; |
| 79 | height:14px |
| 80 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="max-w-[520px] w-full flex gap-4 bg-[#111] border border-[#222] rounded-xl overflow-hidden transition-all duration-300 hover:border-[#333] hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]"> |
| 3 | <div class="w-[140px] shrink-0 flex items-center justify-center bg-gradient-to-br from-[#1A1A2E] to-[#0F0F23]"> |
| 4 | <svg class="w-10 h-10 text-[#00FF41]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <rect x="2" y="3" width="20" height="14" rx="2"/> |
| 6 | <line x1="8" y1="21" x2="16" y2="21"/> |
| 7 | <line x1="12" y1="17" x2="12" y2="21"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="p-5 flex-1 flex flex-col justify-center"> |
| 11 | <h3 class="text-base font-semibold text-[#E0E0E0] mb-1.5"> |
| 12 | Horizontal Card |
| 13 | </h3> |
| 14 | <p class="text-xs text-[#808080] leading-relaxed mb-3.5"> |
| 15 | Side-by-side layouts work great for lists, search results, or product summaries where the image supports the content. |
| 16 | </p> |
| 17 | <a href="#" class="text-xs font-semibold text-[#00FF41] hover:text-[#00E63A] inline-flex items-center gap-1"> |
| 18 | Read case study |
| 19 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 20 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 21 | </svg> |
| 22 | </a> |
| 23 | </div> |
| 24 | </article> |
| 25 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary text-white flex-row" style="max-width:520px;width:100%;border-radius:12px;overflow:hidden;background:#111;border-color:#222"> |
| 3 | <div class="d-flex align-items-center justify-content-center" style="width:140px;flex-shrink:0;background:linear-gradient(135deg,#1A1A2E,#0F0F23)"> |
| 4 | <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <rect x="2" y="3" width="20" height="14" rx="2"/> |
| 6 | <line x1="8" y1="21" x2="16" y2="21"/> |
| 7 | <line x1="12" y1="17" x2="12" y2="21"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="card-body d-flex flex-column justify-content-center"> |
| 11 | <h5 class="card-title fw-semibold"> |
| 12 | Horizontal Card |
| 13 | </h5> |
| 14 | <p class="card-text text-secondary" style="font-size:12px"> |
| 15 | Side-by-side layouts work great for lists, search results, or product summaries where the image supports the content. |
| 16 | </p> |
| 17 | <a href="#" class="text-decoration-none fw-semibold d-inline-flex align-items-center gap-1" style="font-size:12px;color:#00FF41"> |
| 18 | Read case study |
| 19 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 20 | <path d="M5 12h14M12 5l7 7-7 7"/> |
| 21 | </svg> |
| 22 | </a> |
| 23 | </div> |
| 24 | </article> |
| 25 | </div> |
Feature Card
A compact feature card with a glowing gradient accent, an inline SVG icon, and a clear value proposition.
feature-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <div class="card-glow"> |
| 3 | </div> |
| 4 | <div class="card-icon"> |
| 5 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> |
| 7 | </svg> |
| 8 | </div> |
| 9 | <h3 class="card-title"> |
| 10 | Instant Previews |
| 11 | </h3> |
| 12 | <p class="card-desc"> |
| 13 | See component changes in real time with a live iframe preview, syntax highlighting, and framework tabs. |
| 14 | </p> |
| 15 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:280px; |
| 15 | width:100%; |
| 16 | padding:28px; |
| 17 | background:#111; |
| 18 | border:1px solid #222; |
| 19 | border-radius:16px; |
| 20 | position:relative; |
| 21 | overflow:hidden; |
| 22 | transition:all .3s ease |
| 23 | } |
| 24 | .card:hover { |
| 25 | border-color:#00FF41; |
| 26 | box-shadow:0 0 24px rgba(0, |
| 27 | 255, |
| 28 | 65, |
| 29 | .15); |
| 30 | transform:translateY(-2px) |
| 31 | } |
| 32 | .card-glow { |
| 33 | position:absolute; |
| 34 | inset:0; |
| 35 | background:radial-gradient(circle at top right, |
| 36 | rgba(0, |
| 37 | 255, |
| 38 | 65, |
| 39 | .12), |
| 40 | transparent 50%); |
| 41 | pointer-events:none |
| 42 | } |
| 43 | .card-icon { |
| 44 | width:44px; |
| 45 | height:44px; |
| 46 | border-radius:10px; |
| 47 | display:flex; |
| 48 | align-items:center; |
| 49 | justify-content:center; |
| 50 | background:rgba(0, |
| 51 | 255, |
| 52 | 65, |
| 53 | .1); |
| 54 | color:#00FF41; |
| 55 | margin-bottom:16px; |
| 56 | position:relative |
| 57 | } |
| 58 | .card-icon svg { |
| 59 | width:22px; |
| 60 | height:22px |
| 61 | } |
| 62 | .card-title { |
| 63 | font-size:15px; |
| 64 | font-weight:600; |
| 65 | color:#E0E0E0; |
| 66 | margin:0 0 8px 0; |
| 67 | position:relative |
| 68 | } |
| 69 | .card-desc { |
| 70 | font-size:12px; |
| 71 | color:#808080; |
| 72 | margin:0; |
| 73 | line-height:1.6; |
| 74 | position:relative |
| 75 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="relative max-w-[280px] w-full p-7 bg-[#111] border border-[#222] rounded-2xl overflow-hidden transition-all duration-300 hover:border-[#00FF41] hover:shadow-[0_0_24px_rgba(0,255,65,0.15)] hover:-translate-y-0.5"> |
| 3 | <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_top_right,rgba(0,255,65,0.12),transparent_50%)]"> |
| 4 | </div> |
| 5 | <div class="relative w-11 h-11 rounded-xl flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-4"> |
| 6 | <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 7 | <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <h3 class="relative text-[15px] font-semibold text-[#E0E0E0] mb-2"> |
| 11 | Instant Previews |
| 12 | </h3> |
| 13 | <p class="relative text-xs text-[#808080] leading-relaxed"> |
| 14 | See component changes in real time with a live iframe preview, syntax highlighting, and framework tabs. |
| 15 | </p> |
| 16 | </article> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary text-white position-relative overflow-hidden" style="max-width:280px;width:100%;padding:28px;border-radius:16px;background:#111;border-color:#222"> |
| 3 | <div class="position-absolute top-0 end-0 bottom-0 start-0" style="background:radial-gradient(circle at top right,rgba(0,255,65,0.12),transparent 50%);pointer-events:none"> |
| 4 | </div> |
| 5 | <div class="position-relative d-flex align-items-center justify-content-center mb-3" style="width:44px;height:44px;border-radius:10px;background:rgba(0,255,65,0.1)"> |
| 6 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 7 | <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <h5 class="card-title position-relative fw-semibold"> |
| 11 | Instant Previews |
| 12 | </h5> |
| 13 | <p class="card-text position-relative text-secondary" style="font-size:12px"> |
| 14 | See component changes in real time with a live iframe preview, syntax highlighting, and framework tabs. |
| 15 | </p> |
| 16 | </article> |
| 17 | </div> |
Pricing Card
A conversion-focused pricing card with a highlighted tier, feature list, and primary call-to-action.
pricing-card
Live
untitled.html
HTML
| 1 | <article class="card highlight"> |
| 2 | <div class="plan-name"> |
| 3 | Pro Plan |
| 4 | </div> |
| 5 | <div class="plan-price"> |
| 6 | $29 |
| 7 | <span> |
| 8 | /mo |
| 9 | </span> |
| 10 | </div> |
| 11 | <ul class="features"> |
| 12 | <li> |
| 13 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 14 | <polyline points="20 6 9 17 4 12"/> |
| 15 | </svg> |
| 16 | Unlimited projects |
| 17 | </li> |
| 18 | <li> |
| 19 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 20 | <polyline points="20 6 9 17 4 12"/> |
| 21 | </svg> |
| 22 | Team collaboration |
| 23 | </li> |
| 24 | <li> |
| 25 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 26 | <polyline points="20 6 9 17 4 12"/> |
| 27 | </svg> |
| 28 | Priority support |
| 29 | </li> |
| 30 | <li> |
| 31 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 32 | <polyline points="20 6 9 17 4 12"/> |
| 33 | </svg> |
| 34 | Custom domains |
| 35 | </li> |
| 36 | </ul> |
| 37 | <button class="plan-btn"> |
| 38 | Get Started |
| 39 | </button> |
| 40 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:300px; |
| 15 | width:100%; |
| 16 | padding:28px; |
| 17 | background:#111; |
| 18 | border:1px solid #222; |
| 19 | border-radius:16px; |
| 20 | transition:all .3s ease |
| 21 | } |
| 22 | .card:hover { |
| 23 | border-color:#333; |
| 24 | box-shadow:0 8px 32px rgba(0, |
| 25 | 0, |
| 26 | 0, |
| 27 | .4) |
| 28 | } |
| 29 | .highlight { |
| 30 | border-color:#00FF41 |
| 31 | } |
| 32 | .plan-name { |
| 33 | font-size:12px; |
| 34 | font-weight:600; |
| 35 | color:#00FF41; |
| 36 | text-transform:uppercase; |
| 37 | letter-spacing:1px; |
| 38 | margin-bottom:8px |
| 39 | } |
| 40 | .plan-price { |
| 41 | font-size:32px; |
| 42 | font-weight:700; |
| 43 | color:#E0E0E0; |
| 44 | margin-bottom:16px |
| 45 | } |
| 46 | .plan-price span { |
| 47 | font-size:14px; |
| 48 | font-weight:500; |
| 49 | color:#808080 |
| 50 | } |
| 51 | .features { |
| 52 | list-style:none; |
| 53 | padding:0; |
| 54 | margin:0 0 20px 0 |
| 55 | } |
| 56 | .features li { |
| 57 | display:flex; |
| 58 | align-items:center; |
| 59 | gap:8px; |
| 60 | font-size:12px; |
| 61 | color:#A0A0A0; |
| 62 | margin-bottom:10px |
| 63 | } |
| 64 | .features li svg { |
| 65 | width:14px; |
| 66 | height:14px; |
| 67 | color:#00FF41; |
| 68 | flex-shrink:0 |
| 69 | } |
| 70 | .plan-btn { |
| 71 | width:100%; |
| 72 | padding:10px; |
| 73 | border-radius:8px; |
| 74 | font-size:13px; |
| 75 | font-weight:600; |
| 76 | cursor:pointer; |
| 77 | background:#00FF41; |
| 78 | color:#0A0A0A; |
| 79 | border:none; |
| 80 | transition:all .2s |
| 81 | } |
| 82 | .plan-btn:hover { |
| 83 | background:#00E63A |
| 84 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="max-w-[300px] w-full p-7 bg-[#111] border border-[#00FF41] rounded-2xl transition-all duration-300 hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]"> |
| 3 | <div class="text-xs font-semibold text-[#00FF41] uppercase tracking-wider mb-2"> |
| 4 | Pro Plan |
| 5 | </div> |
| 6 | <div class="text-3xl font-bold text-[#E0E0E0] mb-4"> |
| 7 | $29 |
| 8 | <span class="text-sm font-medium text-[#808080]"> |
| 9 | /mo |
| 10 | </span> |
| 11 | </div> |
| 12 | <ul class="space-y-2.5 mb-5 list-none p-0"> |
| 13 | <li class="flex items-center gap-2 text-xs text-[#A0A0A0]"> |
| 14 | <svg class="w-3.5 h-3.5 text-[#00FF41] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 15 | <polyline points="20 6 9 17 4 12"/> |
| 16 | </svg> |
| 17 | Unlimited projects |
| 18 | </li> |
| 19 | <li class="flex items-center gap-2 text-xs text-[#A0A0A0]"> |
| 20 | <svg class="w-3.5 h-3.5 text-[#00FF41] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 21 | <polyline points="20 6 9 17 4 12"/> |
| 22 | </svg> |
| 23 | Team collaboration |
| 24 | </li> |
| 25 | <li class="flex items-center gap-2 text-xs text-[#A0A0A0]"> |
| 26 | <svg class="w-3.5 h-3.5 text-[#00FF41] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 27 | <polyline points="20 6 9 17 4 12"/> |
| 28 | </svg> |
| 29 | Priority support |
| 30 | </li> |
| 31 | <li class="flex items-center gap-2 text-xs text-[#A0A0A0]"> |
| 32 | <svg class="w-3.5 h-3.5 text-[#00FF41] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 33 | <polyline points="20 6 9 17 4 12"/> |
| 34 | </svg> |
| 35 | Custom domains |
| 36 | </li> |
| 37 | </ul> |
| 38 | <button class="w-full py-2.5 rounded-lg text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-colors"> |
| 39 | Get Started |
| 40 | </button> |
| 41 | </article> |
| 42 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark text-white" style="max-width:300px;width:100%;padding:28px;border-radius:16px;background:#111;border-color:#00FF41"> |
| 3 | <div class="text-uppercase fw-semibold mb-2" style="font-size:12px;color:#00FF41;letter-spacing:1px"> |
| 4 | Pro Plan |
| 5 | </div> |
| 6 | <div class="fw-bold mb-3" style="font-size:32px;color:#E0E0E0"> |
| 7 | $29 |
| 8 | <span class="fw-medium" style="font-size:14px;color:#808080"> |
| 9 | /mo |
| 10 | </span> |
| 11 | </div> |
| 12 | <ul class="list-unstyled mb-4"> |
| 13 | <li class="d-flex align-items-center gap-2 mb-2" style="font-size:12px;color:#A0A0A0"> |
| 14 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 15 | <polyline points="20 6 9 17 4 12"/> |
| 16 | </svg> |
| 17 | Unlimited projects |
| 18 | </li> |
| 19 | <li class="d-flex align-items-center gap-2 mb-2" style="font-size:12px;color:#A0A0A0"> |
| 20 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 21 | <polyline points="20 6 9 17 4 12"/> |
| 22 | </svg> |
| 23 | Team collaboration |
| 24 | </li> |
| 25 | <li class="d-flex align-items-center gap-2 mb-2" style="font-size:12px;color:#A0A0A0"> |
| 26 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 27 | <polyline points="20 6 9 17 4 12"/> |
| 28 | </svg> |
| 29 | Priority support |
| 30 | </li> |
| 31 | <li class="d-flex align-items-center gap-2 mb-2" style="font-size:12px;color:#A0A0A0"> |
| 32 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 33 | <polyline points="20 6 9 17 4 12"/> |
| 34 | </svg> |
| 35 | Custom domains |
| 36 | </li> |
| 37 | </ul> |
| 38 | <button class="btn btn-success w-100 fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;--bs-btn-hover-border-color:#00E63A"> |
| 39 | Get Started |
| 40 | </button> |
| 41 | </article> |
| 42 | </div> |
Testimonial Card
A quote card with an avatar, author details, and a subtle border — perfect for social proof sections.
testimonial-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <p class="quote"> |
| 3 | <svg viewBox="0 0 24 24" fill="currentColor"> |
| 4 | <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/> |
| 5 | </svg> |
| 6 | ForgeLearn cut our onboarding time in half. The component patterns are battle-tested and the dark UI fits our brand perfectly. |
| 7 | </p> |
| 8 | <div class="author"> |
| 9 | <div class="avatar"> |
| 10 | JD |
| 11 | </div> |
| 12 | <div class="author-info"> |
| 13 | <span class="author-name"> |
| 14 | Jane Doe |
| 15 | </span> |
| 16 | <span class="author-role"> |
| 17 | Engineering Lead |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
| 21 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:360px; |
| 15 | width:100%; |
| 16 | padding:24px; |
| 17 | background:#111; |
| 18 | border:1px solid #222; |
| 19 | border-radius:14px; |
| 20 | transition:all .3s ease |
| 21 | } |
| 22 | .card:hover { |
| 23 | border-color:#333 |
| 24 | } |
| 25 | .quote { |
| 26 | font-size:14px; |
| 27 | color:#A0A0A0; |
| 28 | line-height:1.6; |
| 29 | margin:0 0 16px 0 |
| 30 | } |
| 31 | .quote svg { |
| 32 | width:20px; |
| 33 | height:20px; |
| 34 | color:#00FF41; |
| 35 | margin-bottom:8px; |
| 36 | display:block |
| 37 | } |
| 38 | .author { |
| 39 | display:flex; |
| 40 | align-items:center; |
| 41 | gap:12px |
| 42 | } |
| 43 | .avatar { |
| 44 | width:40px; |
| 45 | height:40px; |
| 46 | border-radius:50%; |
| 47 | background:linear-gradient(135deg, |
| 48 | #00FF41, |
| 49 | #1A1A2E); |
| 50 | display:flex; |
| 51 | align-items:center; |
| 52 | justify-content:center; |
| 53 | font-weight:700; |
| 54 | color:#0A0A0A; |
| 55 | font-size:14px |
| 56 | } |
| 57 | .author-info { |
| 58 | display:flex; |
| 59 | flex-direction:column |
| 60 | } |
| 61 | .author-name { |
| 62 | font-size:13px; |
| 63 | font-weight:600; |
| 64 | color:#E0E0E0 |
| 65 | } |
| 66 | .author-role { |
| 67 | font-size:11px; |
| 68 | color:#808080 |
| 69 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="max-w-[360px] w-full p-6 bg-[#111] border border-[#222] rounded-[14px] transition-all duration-300 hover:border-[#333]"> |
| 3 | <p class="text-sm text-[#A0A0A0] leading-relaxed mb-4"> |
| 4 | <svg class="w-5 h-5 text-[#00FF41] mb-2 block" viewBox="0 0 24 24" fill="currentColor"> |
| 5 | <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/> |
| 6 | </svg> |
| 7 | ForgeLearn cut our onboarding time in half. The component patterns are battle-tested and the dark UI fits our brand perfectly. |
| 8 | </p> |
| 9 | <div class="flex items-center gap-3"> |
| 10 | <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#00FF41] to-[#1A1A2E] flex items-center justify-center text-sm font-bold text-[#0A0A0A]"> |
| 11 | JD |
| 12 | </div> |
| 13 | <div class="flex flex-col"> |
| 14 | <span class="text-[13px] font-semibold text-[#E0E0E0]"> |
| 15 | Jane Doe |
| 16 | </span> |
| 17 | <span class="text-[11px] text-[#808080]"> |
| 18 | Engineering Lead |
| 19 | </span> |
| 20 | </div> |
| 21 | </div> |
| 22 | </article> |
| 23 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary text-white" style="max-width:360px;width:100%;padding:24px;border-radius:14px;background:#111;border-color:#222"> |
| 3 | <p class="text-secondary mb-3" style="font-size:14px;line-height:1.6"> |
| 4 | <svg class="mb-2 d-block" width="20" height="20" viewBox="0 0 24 24" fill="#00FF41"> |
| 5 | <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/> |
| 6 | </svg> |
| 7 | ForgeLearn cut our onboarding time in half. The component patterns are battle-tested and the dark UI fits our brand perfectly. |
| 8 | </p> |
| 9 | <div class="d-flex align-items-center gap-3"> |
| 10 | <div class="d-flex align-items-center justify-content-center fw-bold" style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#00FF41,#1A1A2E);color:#0A0A0A"> |
| 11 | JD |
| 12 | </div> |
| 13 | <div class="d-flex flex-column"> |
| 14 | <span class="fw-semibold" style="font-size:13px;color:#E0E0E0"> |
| 15 | Jane Doe |
| 16 | </span> |
| 17 | <span style="font-size:11px;color:#808080"> |
| 18 | Engineering Lead |
| 19 | </span> |
| 20 | </div> |
| 21 | </div> |
| 22 | </article> |
| 23 | </div> |
Stat Card
A metric card for dashboards: label, large value, trend indicator, and comparison text.
stat-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <div class="stat-label"> |
| 3 | Total Builds |
| 4 | </div> |
| 5 | <div class="stat-value"> |
| 6 | 12.5k |
| 7 | </div> |
| 8 | <span class="stat-change"> |
| 9 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 10 | <path d="M23 6l-9.5 9.5-5-5L1 18"/> |
| 11 | <path d="M17 6h6v6"/> |
| 12 | </svg> |
| 13 | +18% |
| 14 | </span> |
| 15 | <div class="stat-meta"> |
| 16 | vs last month |
| 17 | </div> |
| 18 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:220px; |
| 15 | width:100%; |
| 16 | padding:24px; |
| 17 | background:#111; |
| 18 | border:1px solid #222; |
| 19 | border-radius:12px; |
| 20 | transition:all .3s ease |
| 21 | } |
| 22 | .card:hover { |
| 23 | border-color:#333 |
| 24 | } |
| 25 | .stat-label { |
| 26 | font-size:11px; |
| 27 | font-weight:600; |
| 28 | color:#808080; |
| 29 | text-transform:uppercase; |
| 30 | letter-spacing:.5px; |
| 31 | margin-bottom:6px |
| 32 | } |
| 33 | .stat-value { |
| 34 | font-size:28px; |
| 35 | font-weight:700; |
| 36 | color:#E0E0E0; |
| 37 | margin-bottom:8px |
| 38 | } |
| 39 | .stat-change { |
| 40 | display:inline-flex; |
| 41 | align-items:center; |
| 42 | gap:4px; |
| 43 | font-size:12px; |
| 44 | font-weight:600; |
| 45 | color:#00FF41; |
| 46 | background:rgba(0, |
| 47 | 255, |
| 48 | 65, |
| 49 | .1); |
| 50 | padding:3px 8px; |
| 51 | border-radius:999px |
| 52 | } |
| 53 | .stat-change svg { |
| 54 | width:12px; |
| 55 | height:12px |
| 56 | } |
| 57 | .stat-meta { |
| 58 | font-size:11px; |
| 59 | color:#808080; |
| 60 | margin-top:10px |
| 61 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="max-w-[220px] w-full p-6 bg-[#111] border border-[#222] rounded-xl transition-all duration-300 hover:border-[#333]"> |
| 3 | <div class="text-[11px] font-semibold text-[#808080] uppercase tracking-wide mb-1.5"> |
| 4 | Total Builds |
| 5 | </div> |
| 6 | <div class="text-[28px] font-bold text-[#E0E0E0] mb-2"> |
| 7 | 12.5k |
| 8 | </div> |
| 9 | <span class="inline-flex items-center gap-1 text-xs font-semibold text-[#00FF41] bg-[rgba(0,255,65,0.1)] px-2 py-0.5 rounded-full"> |
| 10 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 11 | <path d="M23 6l-9.5 9.5-5-5L1 18"/> |
| 12 | <path d="M17 6h6v6"/> |
| 13 | </svg> |
| 14 | +18% |
| 15 | </span> |
| 16 | <div class="text-[11px] text-[#808080] mt-2.5"> |
| 17 | vs last month |
| 18 | </div> |
| 19 | </article> |
| 20 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary text-white" style="max-width:220px;width:100%;padding:24px;border-radius:12px;background:#111;border-color:#222"> |
| 3 | <div class="text-uppercase fw-semibold mb-1" style="font-size:11px;color:#808080;letter-spacing:.5px"> |
| 4 | Total Builds |
| 5 | </div> |
| 6 | <div class="fw-bold mb-2" style="font-size:28px;color:#E0E0E0"> |
| 7 | 12.5k |
| 8 | </div> |
| 9 | <span class="d-inline-flex align-items-center gap-1 fw-semibold rounded-pill" style="font-size:12px;color:#00FF41;background:rgba(0,255,65,0.1);padding:3px 8px"> |
| 10 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 11 | <path d="M23 6l-9.5 9.5-5-5L1 18"/> |
| 12 | <path d="M17 6h6v6"/> |
| 13 | </svg> |
| 14 | +18% |
| 15 | </span> |
| 16 | <div class="mt-2" style="font-size:11px;color:#808080"> |
| 17 | vs last month |
| 18 | </div> |
| 19 | </article> |
| 20 | </div> |
Card Grid
A responsive grid of icon cards using CSS Grid. The layout adapts from one column on mobile to three columns on desktop.
card-grid
Live
untitled.html
HTML
| 1 | <div class="grid"> |
| 2 | <article class="card"> |
| 3 | <div class="card-icon"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <h3 class="card-title"> |
| 9 | Fast |
| 10 | </h3> |
| 11 | <p class="card-desc"> |
| 12 | Optimized for speed with minimal overhead. |
| 13 | </p> |
| 14 | </article> |
| 15 | <article class="card"> |
| 16 | <div class="card-icon"> |
| 17 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 18 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 19 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 20 | </svg> |
| 21 | </div> |
| 22 | <h3 class="card-title"> |
| 23 | Secure |
| 24 | </h3> |
| 25 | <p class="card-desc"> |
| 26 | Built-in security best practices. |
| 27 | </p> |
| 28 | </article> |
| 29 | <article class="card"> |
| 30 | <div class="card-icon"> |
| 31 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 32 | <circle cx="12" cy="12" r="3"/> |
| 33 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 34 | </svg> |
| 35 | </div> |
| 36 | <h3 class="card-title"> |
| 37 | Customizable |
| 38 | </h3> |
| 39 | <p class="card-desc"> |
| 40 | Fully themeable with CSS variables. |
| 41 | </p> |
| 42 | </article> |
| 43 | <article class="card"> |
| 44 | <div class="card-icon"> |
| 45 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 46 | <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/> |
| 47 | <line x1="12" y1="18" x2="12.01" y2="18"/> |
| 48 | </svg> |
| 49 | </div> |
| 50 | <h3 class="card-title"> |
| 51 | Responsive |
| 52 | </h3> |
| 53 | <p class="card-desc"> |
| 54 | Works on every screen size. |
| 55 | </p> |
| 56 | </article> |
| 57 | <article class="card"> |
| 58 | <div class="card-icon"> |
| 59 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 60 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 61 | </svg> |
| 62 | </div> |
| 63 | <h3 class="card-title"> |
| 64 | Accessible |
| 65 | </h3> |
| 66 | <p class="card-desc"> |
| 67 | WCAG 2.1 compliant by default. |
| 68 | </p> |
| 69 | </article> |
| 70 | <article class="card"> |
| 71 | <div class="card-icon"> |
| 72 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 73 | <circle cx="12" cy="12" r="10"/> |
| 74 | <line x1="2" y1="12" x2="22" y2="12"/> |
| 75 | <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/> |
| 76 | </svg> |
| 77 | </div> |
| 78 | <h3 class="card-title"> |
| 79 | Global |
| 80 | </h3> |
| 81 | <p class="card-desc"> |
| 82 | i18n ready with RTL support. |
| 83 | </p> |
| 84 | </article> |
| 85 | </div> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin:0; |
| 7 | padding:24px |
| 8 | } |
| 9 | .grid { |
| 10 | display:grid; |
| 11 | grid-template-columns:repeat(auto-fill, |
| 12 | minmax(180px, |
| 13 | 1fr)); |
| 14 | gap:16px; |
| 15 | max-width:760px; |
| 16 | margin:0 auto |
| 17 | } |
| 18 | .card { |
| 19 | background:#111; |
| 20 | border:1px solid #222; |
| 21 | border-radius:10px; |
| 22 | padding:20px; |
| 23 | transition:all .3s ease |
| 24 | } |
| 25 | .card:hover { |
| 26 | border-color:#333; |
| 27 | transform:translateY(-2px); |
| 28 | box-shadow:0 8px 24px rgba(0, |
| 29 | 0, |
| 30 | 0, |
| 31 | .3) |
| 32 | } |
| 33 | .card-icon { |
| 34 | width:36px; |
| 35 | height:36px; |
| 36 | border-radius:8px; |
| 37 | display:flex; |
| 38 | align-items:center; |
| 39 | justify-content:center; |
| 40 | background:rgba(0, |
| 41 | 255, |
| 42 | 65, |
| 43 | .1); |
| 44 | color:#00FF41; |
| 45 | margin-bottom:12px |
| 46 | } |
| 47 | .card-icon svg { |
| 48 | width:18px; |
| 49 | height:18px |
| 50 | } |
| 51 | .card-title { |
| 52 | font-size:14px; |
| 53 | font-weight:600; |
| 54 | color:#E0E0E0; |
| 55 | margin:0 0 6px 0 |
| 56 | } |
| 57 | .card-desc { |
| 58 | font-size:11px; |
| 59 | color:#808080; |
| 60 | margin:0; |
| 61 | line-height:1.5 |
| 62 | } |
untitled.html
HTML
| 1 | <div class="p-6 bg-[#0A0A0A]"> |
| 2 | <div class="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4 max-w-[760px] mx-auto"> |
| 3 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 4 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 5 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 7 | </svg> |
| 8 | </div> |
| 9 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 10 | Fast |
| 11 | </h3> |
| 12 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 13 | Optimized for speed with minimal overhead. |
| 14 | </p> |
| 15 | </article> |
| 16 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 17 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 18 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 19 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 20 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 21 | </svg> |
| 22 | </div> |
| 23 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 24 | Secure |
| 25 | </h3> |
| 26 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 27 | Built-in security best practices. |
| 28 | </p> |
| 29 | </article> |
| 30 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 31 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 32 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 33 | <circle cx="12" cy="12" r="3"/> |
| 34 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 35 | </svg> |
| 36 | </div> |
| 37 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 38 | Customizable |
| 39 | </h3> |
| 40 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 41 | Fully themeable with CSS variables. |
| 42 | </p> |
| 43 | </article> |
| 44 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 45 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 46 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 47 | <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/> |
| 48 | <line x1="12" y1="18" x2="12.01" y2="18"/> |
| 49 | </svg> |
| 50 | </div> |
| 51 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 52 | Responsive |
| 53 | </h3> |
| 54 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 55 | Works on every screen size. |
| 56 | </p> |
| 57 | </article> |
| 58 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 59 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 60 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 61 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 62 | </svg> |
| 63 | </div> |
| 64 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 65 | Accessible |
| 66 | </h3> |
| 67 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 68 | WCAG 2.1 compliant by default. |
| 69 | </p> |
| 70 | </article> |
| 71 | <article class="bg-[#111] border border-[#222] rounded-xl p-5 transition-all duration-300 hover:border-[#333] hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"> |
| 72 | <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-[rgba(0,255,65,0.1)] text-[#00FF41] mb-3"> |
| 73 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 74 | <circle cx="12" cy="12" r="10"/> |
| 75 | <line x1="2" y1="12" x2="22" y2="12"/> |
| 76 | <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/> |
| 77 | </svg> |
| 78 | </div> |
| 79 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-1.5"> |
| 80 | Global |
| 81 | </h3> |
| 82 | <p class="text-[11px] text-[#808080] leading-relaxed"> |
| 83 | i18n ready with RTL support. |
| 84 | </p> |
| 85 | </article> |
| 86 | </div> |
| 87 | </div> |
untitled.html
HTML
| 1 | <div class="p-4 bg-[#0A0A0A]"> |
| 2 | <div class="row g-3" style="max-width:760px;margin:0 auto"> |
| 3 | <div class="col-6 col-md-4"> |
| 4 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 5 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 6 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 7 | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 11 | Fast |
| 12 | </h5> |
| 13 | <p class="card-text text-secondary" style="font-size:11px"> |
| 14 | Optimized for speed with minimal overhead. |
| 15 | </p> |
| 16 | </article> |
| 17 | </div> |
| 18 | <div class="col-6 col-md-4"> |
| 19 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 20 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 21 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 22 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 23 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 24 | </svg> |
| 25 | </div> |
| 26 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 27 | Secure |
| 28 | </h5> |
| 29 | <p class="card-text text-secondary" style="font-size:11px"> |
| 30 | Built-in security best practices. |
| 31 | </p> |
| 32 | </article> |
| 33 | </div> |
| 34 | <div class="col-6 col-md-4"> |
| 35 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 36 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 37 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 38 | <circle cx="12" cy="12" r="3"/> |
| 39 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 40 | </svg> |
| 41 | </div> |
| 42 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 43 | Customizable |
| 44 | </h5> |
| 45 | <p class="card-text text-secondary" style="font-size:11px"> |
| 46 | Fully themeable with CSS variables. |
| 47 | </p> |
| 48 | </article> |
| 49 | </div> |
| 50 | <div class="col-6 col-md-4"> |
| 51 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 52 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 53 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 54 | <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/> |
| 55 | <line x1="12" y1="18" x2="12.01" y2="18"/> |
| 56 | </svg> |
| 57 | </div> |
| 58 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 59 | Responsive |
| 60 | </h5> |
| 61 | <p class="card-text text-secondary" style="font-size:11px"> |
| 62 | Works on every screen size. |
| 63 | </p> |
| 64 | </article> |
| 65 | </div> |
| 66 | <div class="col-6 col-md-4"> |
| 67 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 68 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 69 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 70 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 71 | </svg> |
| 72 | </div> |
| 73 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 74 | Accessible |
| 75 | </h5> |
| 76 | <p class="card-text text-secondary" style="font-size:11px"> |
| 77 | WCAG 2.1 compliant by default. |
| 78 | </p> |
| 79 | </article> |
| 80 | </div> |
| 81 | <div class="col-6 col-md-4"> |
| 82 | <article class="card bg-dark border-secondary h-100" style="background:#111;border-color:#222;border-radius:10px;padding:20px"> |
| 83 | <div class="d-flex align-items-center justify-content-center mb-3" style="width:36px;height:36px;border-radius:8px;background:rgba(0,255,65,0.1)"> |
| 84 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 85 | <circle cx="12" cy="12" r="10"/> |
| 86 | <line x1="2" y1="12" x2="22" y2="12"/> |
| 87 | <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/> |
| 88 | </svg> |
| 89 | </div> |
| 90 | <h5 class="card-title fw-semibold" style="font-size:14px"> |
| 91 | Global |
| 92 | </h5> |
| 93 | <p class="card-text text-secondary" style="font-size:11px"> |
| 94 | i18n ready with RTL support. |
| 95 | </p> |
| 96 | </article> |
| 97 | </div> |
| 98 | </div> |
| 99 | </div> |
Interactive Hover Card
A project-style card with a gradient media area and a hover-reveal action button. Uses CSS transforms and transitions for the reveal effect.
interactive-card
Live
untitled.html
HTML
| 1 | <article class="card"> |
| 2 | <div class="card-img-wrap"> |
| 3 | <div class="card-img"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 6 | <path d="M2 17l10 5 10-5"/> |
| 7 | <path d="M2 12l10 5 10-5"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="card-overlay"> |
| 11 | </div> |
| 12 | <button class="card-action"> |
| 13 | View Project |
| 14 | </button> |
| 15 | </div> |
| 16 | <div class="card-body"> |
| 17 | <h3 class="card-title"> |
| 18 | Project Alpha |
| 19 | </h3> |
| 20 | <p class="card-sub"> |
| 21 | Interactive hover reveal card |
| 22 | </p> |
| 23 | </div> |
| 24 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .card { |
| 14 | max-width:280px; |
| 15 | width:100%; |
| 16 | border-radius:12px; |
| 17 | overflow:hidden; |
| 18 | background:#111; |
| 19 | border:1px solid #222; |
| 20 | cursor:pointer; |
| 21 | transition:all .3s ease |
| 22 | } |
| 23 | .card:hover { |
| 24 | border-color:#333; |
| 25 | box-shadow:0 8px 32px rgba(0, |
| 26 | 0, |
| 27 | 0, |
| 28 | .4) |
| 29 | } |
| 30 | .card-img-wrap { |
| 31 | position:relative; |
| 32 | overflow:hidden |
| 33 | } |
| 34 | .card-img { |
| 35 | height:200px; |
| 36 | display:flex; |
| 37 | align-items:center; |
| 38 | justify-content:center; |
| 39 | background:linear-gradient(135deg, |
| 40 | #0F0F23, |
| 41 | #2D1B69); |
| 42 | transition:transform .5s ease |
| 43 | } |
| 44 | .card-img svg { |
| 45 | width:64px; |
| 46 | height:64px; |
| 47 | color:#00FF41; |
| 48 | opacity:.8 |
| 49 | } |
| 50 | .card:hover .card-img { |
| 51 | transform:scale(1.05) |
| 52 | } |
| 53 | .card-overlay { |
| 54 | position:absolute; |
| 55 | inset:0; |
| 56 | background:linear-gradient(to top, |
| 57 | rgba(0, |
| 58 | 0, |
| 59 | 0, |
| 60 | .8), |
| 61 | transparent 50%); |
| 62 | opacity:0; |
| 63 | transition:opacity .3s ease |
| 64 | } |
| 65 | .card:hover .card-overlay { |
| 66 | opacity:1 |
| 67 | } |
| 68 | .card-action { |
| 69 | position:absolute; |
| 70 | bottom:16px; |
| 71 | left:50%; |
| 72 | transform:translateX(-50%) translateY(10px); |
| 73 | padding:8px 20px; |
| 74 | border-radius:8px; |
| 75 | font-size:12px; |
| 76 | font-weight:600; |
| 77 | background:#00FF41; |
| 78 | color:#0A0A0A; |
| 79 | border:none; |
| 80 | cursor:pointer; |
| 81 | opacity:0; |
| 82 | transition:all .3s ease; |
| 83 | white-space:nowrap |
| 84 | } |
| 85 | .card:hover .card-action { |
| 86 | opacity:1; |
| 87 | transform:translateX(-50%) translateY(0) |
| 88 | } |
| 89 | .card-body { |
| 90 | padding:16px |
| 91 | } |
| 92 | .card-title { |
| 93 | font-size:15px; |
| 94 | font-weight:600; |
| 95 | color:#E0E0E0; |
| 96 | margin:0 0 4px 0 |
| 97 | } |
| 98 | .card-sub { |
| 99 | font-size:11px; |
| 100 | color:#808080; |
| 101 | margin:0 |
| 102 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="group max-w-[280px] w-full rounded-xl overflow-hidden bg-[#111] border border-[#222] cursor-pointer transition-all duration-300 hover:border-[#333] hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]"> |
| 3 | <div class="relative overflow-hidden"> |
| 4 | <div class="h-[200px] flex items-center justify-center bg-gradient-to-br from-[#0F0F23] to-[#2D1B69] transition-transform duration-500 group-hover:scale-105"> |
| 5 | <svg class="w-16 h-16 text-[#00FF41]/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 7 | <path d="M2 17l10 5 10-5"/> |
| 8 | <path d="M2 12l10 5 10-5"/> |
| 9 | </svg> |
| 10 | </div> |
| 11 | <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| 12 | </div> |
| 13 | <button class="absolute bottom-4 left-1/2 -translate-x-1/2 translate-y-2.5 px-5 py-2 rounded-lg text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 pointer-events-none"> |
| 14 | View Project |
| 15 | </button> |
| 16 | </div> |
| 17 | <div class="p-4"> |
| 18 | <h3 class="text-[15px] font-semibold text-[#E0E0E0] mb-1"> |
| 19 | Project Alpha |
| 20 | </h3> |
| 21 | <p class="text-[11px] text-[#808080]"> |
| 22 | Interactive hover reveal card |
| 23 | </p> |
| 24 | </div> |
| 25 | </article> |
| 26 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <article class="card bg-dark border-secondary overflow-hidden" style="max-width:280px;width:100%;border-radius:12px;background:#111;border-color:#222"> |
| 3 | <div class="position-relative overflow-hidden"> |
| 4 | <div class="d-flex align-items-center justify-content-center" style="height:200px;background:linear-gradient(135deg,#0F0F23,#2D1B69)"> |
| 5 | <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 7 | <path d="M2 17l10 5 10-5"/> |
| 8 | <path d="M2 12l10 5 10-5"/> |
| 9 | </svg> |
| 10 | </div> |
| 11 | <div class="position-absolute top-0 end-0 bottom-0 start-0" style="background:linear-gradient(to top,rgba(0,0,0,0.8),transparent 50%);pointer-events:none"> |
| 12 | </div> |
| 13 | <button class="btn btn-success fw-semibold position-absolute" style="bottom:16px;left:50%;transform:translateX(-50%);padding:8px 20px;font-size:12px;--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A"> |
| 14 | View Project |
| 15 | </button> |
| 16 | </div> |
| 17 | <div class="card-body"> |
| 18 | <h5 class="card-title fw-semibold"> |
| 19 | Project Alpha |
| 20 | </h5> |
| 21 | <p class="card-text text-secondary" style="font-size:11px"> |
| 22 | Interactive hover reveal card |
| 23 | </p> |
| 24 | </div> |
| 25 | </article> |
| 26 | </div> |
Accessibility
Cards must remain readable and operable for keyboard and screen-reader users. Treat each card as a content region and ensure interactive targets are easy to reach.
- Use <article> for self-contained cards so screen readers can navigate by landmark or region.
- Keep heading levels logical: do not skip from <h2> to <h4> inside a card.
- Images need meaningful alt text, or aria-hidden="true" when purely decorative.
- Make the whole card clickable with an <a> or <button> wrapper, or keep the action control focusable.
- Ensure focus indicators are visible against the dark background.
- Do not rely on color alone to convey status; pair badges and trend arrows with labels.
Motion & Micro-interactions
Modern cards feel tactile because of layered motion: a slight lift on hover, a green glow shadow, a subtle scale on the media, and a short upward slide on the content. Keep transitions under 350ms and animate only transform and opacity so the browser can composite them on the GPU.
📝
note
Always respect prefers-reduced-motion. When a user has requested reduced motion, disable lifts, scales, and glow pulses so the card stays static and comfortable to read.
card-motion
Live
untitled.html
HTML
| 1 | <article class="m-card" data-card> |
| 2 | <div class="m-card-media"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 5 | <path d="M2 17l10 5 10-5"/> |
| 6 | <path d="M2 12l10 5 10-5"/> |
| 7 | </svg> |
| 8 | <span class="m-card-badge"> |
| 9 | Featured |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="m-card-body"> |
| 13 | <h3 class="m-card-title"> |
| 14 | Motion Card |
| 15 | </h3> |
| 16 | <p class="m-card-desc"> |
| 17 | Hover to see lift, glow, image scale, and content slide. |
| 18 | </p> |
| 19 | </div> |
| 20 | <div class="m-card-spotlight" data-spotlight> |
| 21 | </div> |
| 22 | </article> |
untitled.css
CSS
| 1 | body { |
| 2 | background:#0A0A0A; |
| 3 | color:#E0E0E0; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | display:flex; |
| 7 | align-items:center; |
| 8 | justify-content:center; |
| 9 | min-height:100vh; |
| 10 | margin:0; |
| 11 | padding:16px |
| 12 | } |
| 13 | .m-card { |
| 14 | position:relative; |
| 15 | max-width:280px; |
| 16 | width:100%; |
| 17 | background:#111; |
| 18 | border:1px solid #222; |
| 19 | border-radius:14px; |
| 20 | overflow:hidden; |
| 21 | cursor:pointer; |
| 22 | transition:transform .35s cubic-bezier(.4, |
| 23 | 0, |
| 24 | .2, |
| 25 | 1), |
| 26 | border-color .35s, |
| 27 | box-shadow .35s |
| 28 | } |
| 29 | .m-card:hover { |
| 30 | transform:translateY(-8px); |
| 31 | border-color:#00FF41; |
| 32 | box-shadow:0 20px 40px rgba(0, |
| 33 | 255, |
| 34 | 65, |
| 35 | .15), |
| 36 | 0 0 0 1px rgba(0, |
| 37 | 255, |
| 38 | 65, |
| 39 | .1) |
| 40 | } |
| 41 | .m-card-media { |
| 42 | position:relative; |
| 43 | height:180px; |
| 44 | display:flex; |
| 45 | align-items:center; |
| 46 | justify-content:center; |
| 47 | background:linear-gradient(135deg, |
| 48 | #1A1A2E, |
| 49 | #2A1A3E); |
| 50 | overflow:hidden |
| 51 | } |
| 52 | .m-card-media svg { |
| 53 | width:56px; |
| 54 | height:56px; |
| 55 | color:#00FF41; |
| 56 | transition:transform .5s cubic-bezier(.4, |
| 57 | 0, |
| 58 | .2, |
| 59 | 1) |
| 60 | } |
| 61 | .m-card:hover .m-card-media svg { |
| 62 | transform:scale(1.12) |
| 63 | } |
| 64 | .m-card-badge { |
| 65 | position:absolute; |
| 66 | top:12px; |
| 67 | right:12px; |
| 68 | padding:4px 10px; |
| 69 | border-radius:999px; |
| 70 | font-size:10px; |
| 71 | font-weight:700; |
| 72 | text-transform:uppercase; |
| 73 | letter-spacing:.05em; |
| 74 | background:#00FF41; |
| 75 | color:#0A0A0A; |
| 76 | opacity:0; |
| 77 | transform:translateY(-8px); |
| 78 | transition:opacity .3s, |
| 79 | transform .3s |
| 80 | } |
| 81 | .m-card:hover .m-card-badge { |
| 82 | opacity:1; |
| 83 | transform:translateY(0) |
| 84 | } |
| 85 | .m-card-body { |
| 86 | padding:18px; |
| 87 | transition:transform .35s cubic-bezier(.4, |
| 88 | 0, |
| 89 | .2, |
| 90 | 1) |
| 91 | } |
| 92 | .m-card:hover .m-card-body { |
| 93 | transform:translateY(-4px) |
| 94 | } |
| 95 | .m-card-title { |
| 96 | font-size:16px; |
| 97 | font-weight:600; |
| 98 | color:#E0E0E0; |
| 99 | margin:0 0 6px |
| 100 | } |
| 101 | .m-card-desc { |
| 102 | font-size:12px; |
| 103 | color:#A0A0A0; |
| 104 | margin:0; |
| 105 | line-height:1.5 |
| 106 | } |
| 107 | .m-card-spotlight { |
| 108 | position:absolute; |
| 109 | inset:0; |
| 110 | pointer-events:none; |
| 111 | opacity:0; |
| 112 | transition:opacity .25s |
| 113 | } |
| 114 | @media(prefers-reduced-motion:reduce) { |
| 115 | .m-card, |
| 116 | .m-card-media svg, |
| 117 | .m-card-badge, |
| 118 | .m-card-body, |
| 119 | .m-card-spotlight { |
| 120 | transition:none !important; |
| 121 | animation:none !important |
| 122 | } |
| 123 | .m-card:hover { |
| 124 | transform:none; |
| 125 | border-color:#222; |
| 126 | box-shadow:none |
| 127 | } |
| 128 | .m-card:hover .m-card-media svg { |
| 129 | transform:none |
| 130 | } |
| 131 | .m-card:hover .m-card-badge { |
| 132 | opacity:1; |
| 133 | transform:none |
| 134 | } |
| 135 | .m-card:hover .m-card-body { |
| 136 | transform:none |
| 137 | } |
| 138 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('[data-card]').forEach(card=>{const spotlight=card.querySelector('[data-spotlight]');card.addEventListener('mousemove',e=>{const rect=card.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;if(spotlight){spotlight.style.background='radial-gradient(circle at '+x+'px '+y+'px, rgba(0,255,65,0.12), transparent 55%)';spotlight.style.opacity='1';}});card.addEventListener('mouseleave',()=>{if(spotlight)spotlight.style.opacity='0';});}); |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center min-h-screen p-6 bg-[#0A0A0A]"> |
| 2 | <article class="group relative max-w-[280px] w-full bg-[#111] border border-[#222] rounded-[14px] overflow-hidden cursor-pointer transition-all duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:-translate-y-2 hover:border-[#00FF41] hover:shadow-[0_20px_40px_rgba(0,255,65,0.15),0_0_0_1px_rgba(0,255,65,0.1)]" data-card> |
| 3 | <div class="relative h-[180px] flex items-center justify-center bg-gradient-to-br from-[#1A1A2E] to-[#2A1A3E] overflow-hidden"> |
| 4 | <svg class="w-14 h-14 text-[#00FF41] transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[1.12]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 6 | <path d="M2 17l10 5 10-5"/> |
| 7 | <path d="M2 12l10 5 10-5"/> |
| 8 | </svg> |
| 9 | <span class="absolute top-3 right-3 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[#00FF41] text-[#0A0A0A] opacity-0 -translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300"> |
| 10 | Featured |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="p-[18px] transition-transform duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:-translate-y-1"> |
| 14 | <h3 class="text-base font-semibold text-[#E0E0E0] mb-1.5"> |
| 15 | Motion Card |
| 16 | </h3> |
| 17 | <p class="text-xs text-[#A0A0A0] leading-relaxed"> |
| 18 | Hover to see lift, glow, image scale, and content slide. |
| 19 | </p> |
| 20 | </div> |
| 21 | <div class="absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-300" data-spotlight> |
| 22 | </div> |
| 23 | </article> |
| 24 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .card-motion { transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s !important; cursor: pointer; } |
| 3 | .card-motion:hover { transform: translateY(-8px); border-color: #00FF41 !important; box-shadow: 0 20px 40px rgba(0,255,65,.15), 0 0 0 1px rgba(0,255,65,.1) !important; } |
| 4 | .motion-media { position: relative; } |
| 5 | .motion-media svg { transition: transform .5s cubic-bezier(.4,0,.2,1); } |
| 6 | .card-motion:hover .motion-media svg { transform: scale(1.12); } |
| 7 | .motion-badge { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; background: #00FF41 !important; color: #0A0A0A !important; } |
| 8 | .card-motion:hover .motion-badge { opacity: 1; transform: translateY(0); } |
| 9 | .motion-body { transition: transform .35s cubic-bezier(.4,0,.2,1); } |
| 10 | .card-motion:hover .motion-body { transform: translateY(-4px); } |
| 11 | .motion-spotlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; } |
| 12 | @media (prefers-reduced-motion: reduce) { |
| 13 | .card-motion, .motion-media svg, .motion-badge, .motion-body, .motion-spotlight { transition: none !important; } |
| 14 | .card-motion:hover { transform: none; border-color: #222 !important; box-shadow: none !important; } |
| 15 | .card-motion:hover .motion-media svg { transform: none; } |
| 16 | .card-motion:hover .motion-badge { opacity: 1; transform: none; } |
| 17 | .card-motion:hover .motion-body { transform: none; } |
| 18 | } |
| 19 | </style> |
| 20 | <div class="d-flex justify-content-center p-4"> |
| 21 | <article class="card card-motion overflow-hidden position-relative" style="max-width:280px;width:100%;background:#111;border-color:#222;border-radius:14px" data-card> |
| 22 | <div class="motion-media d-flex align-items-center justify-content-center" style="height:180px;background:linear-gradient(135deg,#1A1A2E,#2A1A3E)"> |
| 23 | <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 24 | <path d="M12 2L2 7l10 5 10-5-10-5z"/> |
| 25 | <path d="M2 17l10 5 10-5"/> |
| 26 | <path d="M2 12l10 5 10-5"/> |
| 27 | </svg> |
| 28 | <span class="badge motion-badge"> |
| 29 | Featured |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="card-body motion-body"> |
| 33 | <h5 class="card-title text-white fw-semibold"> |
| 34 | Motion Card |
| 35 | </h5> |
| 36 | <p class="card-text text-secondary" style="font-size:12px"> |
| 37 | Hover to see lift, glow, image scale, and content slide. |
| 38 | </p> |
| 39 | </div> |
| 40 | <div class="motion-spotlight"> |
| 41 | </div> |
| 42 | </article> |
| 43 | </div> |
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.