                        <div class="page-header">
                            <div>
                                <h1>Cards</h1>
                                <p class="subtitle">A toolkit of card patterns &mdash; profile, KPI, image, pricing, notification, list-group, mini-chart, and accent variants.</p>
                            </div>
                        </div>

                        <!-- ROW 1: KPI / stat cards -->
                        <h5 class="section-eyebrow" style="margin-bottom: 8px;">KPI &amp; STAT CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Revenue</p>
                                        <span class="stat-card__icon stat-card__icon--c1"><i class="fa-solid fa-dollar-sign"></i></span>
                                    </div>
                                    <p class="stat-card__value">$48,217</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up"></i>12.5% <span class="stat-card__delta-period">vs last 30d</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">New customers</p>
                                        <span class="stat-card__icon stat-card__icon--c2"><i class="fa-solid fa-user-plus"></i></span>
                                    </div>
                                    <p class="stat-card__value">284</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up"></i>8.2% <span class="stat-card__delta-period">vs last 30d</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Bounce rate</p>
                                        <span class="stat-card__icon stat-card__icon--c3"><i class="fa-solid fa-arrow-trend-down"></i></span>
                                    </div>
                                    <p class="stat-card__value">38.4%</p>
                                    <p class="stat-card__delta stat-card__delta--down">
                                        <i class="fa-solid fa-arrow-down"></i>2.1pp <span class="stat-card__delta-period">vs last 30d</span>
                                    </p>
                                </article>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <article class="stat-card">
                                    <div class="stat-card__head">
                                        <p class="stat-card__label">Conversion</p>
                                        <span class="stat-card__icon stat-card__icon--c4"><i class="fa-solid fa-bullseye"></i></span>
                                    </div>
                                    <p class="stat-card__value">3.24%</p>
                                    <p class="stat-card__delta stat-card__delta--up">
                                        <i class="fa-solid fa-arrow-up"></i>0.6pp <span class="stat-card__delta-period">vs last 30d</span>
                                    </p>
                                </article>
                            </div>
                        </div>

                        <!-- ROW 2: Profile / team cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">PROFILE CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-md-6 col-lg-4">
                                <section class="m-card profile-card">
                                    <div class="profile-card__avatar"><img src="images/icon/avatar-01.jpg" alt="John Doe"></div>
                                    <h2 class="profile-card__name">John Doe</h2>
                                    <p class="profile-card__role">Engineering lead &middot; San Francisco</p>
                                    <div class="profile-card__stats">
                                        <div class="profile-card__stat"><p class="profile-card__stat-value">128</p><p class="profile-card__stat-label">Projects</p></div>
                                        <div class="profile-card__stat"><p class="profile-card__stat-value">2.4k</p><p class="profile-card__stat-label">Commits</p></div>
                                        <div class="profile-card__stat"><p class="profile-card__stat-value">98%</p><p class="profile-card__stat-label">On time</p></div>
                                    </div>
                                    <hr class="profile-card__divider">
                                    <div class="profile-card__socials">
                                        <a href="#" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
                                        <a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
                                        <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                                        <a href="#" aria-label="Website"><i class="fa-solid fa-link"></i></a>
                                    </div>
                                </section>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <section class="m-card profile-card">
                                    <div class="profile-card__avatar"><img src="images/icon/avatar-04.jpg" alt="Diane Myers"></div>
                                    <h2 class="profile-card__name">Diane Myers</h2>
                                    <p class="profile-card__role">Senior engineer &middot; Berlin</p>
                                    <p style="font-size: 13px; color: var(--m-text-muted); margin: 12px 0 0; line-height: 1.5;">Backend, distributed systems, and a soft spot for typed languages. Currently leading the auth-flow refactor.</p>
                                    <div style="margin-top: 16px; display: flex; gap: 8px; justify-content: center;">
                                        <button type="button" class="m-btn m-btn--primary"><i class="fa-regular fa-envelope"></i> Message</button>
                                        <button type="button" class="m-btn m-btn--ghost"><i class="fa-solid fa-user-plus"></i> Follow</button>
                                    </div>
                                </section>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <section class="m-card profile-card" style="background: linear-gradient(135deg, #4272d7 0%, #3155b3 100%); color: #fff; border-color: transparent;">
                                    <div class="profile-card__avatar" style="border-color: rgba(255,255,255,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.2);"><img src="images/icon/avatar-06.jpg" alt="Michelle Moreno"></div>
                                    <h2 class="profile-card__name" style="color: #fff;">Michelle Moreno</h2>
                                    <p class="profile-card__role" style="color: rgba(255,255,255,0.85);">Product designer &middot; New York</p>
                                    <hr class="profile-card__divider" style="border-color: rgba(255,255,255,0.20);">
                                    <p style="font-size: 13px; color: rgba(255,255,255,0.92); margin: 0; line-height: 1.5;">&ldquo;Design isn&rsquo;t how it looks &mdash; it&rsquo;s how it works. And then how it looks.&rdquo;</p>
                                    <div style="margin-top: 18px;">
                                        <button type="button" class="m-btn" style="background: #fff; color: var(--m-accent); border: 0;">View profile</button>
                                    </div>
                                </section>
                            </div>
                        </div>

                        <!-- ROW 3: Content / cover image cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">CONTENT CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-md-6 col-lg-4">
                                <article class="m-card cover-card">
                                    <img class="cover-card__image" src="images/bg-title-01.jpg" alt="">
                                    <div class="cover-card__body">
                                        <span class="cover-card__tag">Engineering</span>
                                        <h3 class="cover-card__title">Migrating to a typed monorepo</h3>
                                        <p class="cover-card__text">Eight months in: what we got right, what we&rsquo;d skip, and the surprising places TypeScript pays for itself.</p>
                                        <div class="cover-card__footer">
                                            <span class="cover-card__author">
                                                <img src="images/icon/avatar-01.jpg" alt="">
                                                John Doe &middot; 8 min read
                                            </span>
                                            <a href="#" class="m-btn m-btn--ghost" style="height: 30px; padding: 0 12px; font-size: 12.5px;">Read</a>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <article class="m-card cover-card">
                                    <img class="cover-card__image" src="images/bg-title-02.jpg" alt="">
                                    <div class="cover-card__body">
                                        <span class="cover-card__tag" style="background: var(--m-c2-soft); color: var(--m-c2);">Product</span>
                                        <h3 class="cover-card__title">Q2 product roadmap</h3>
                                        <p class="cover-card__text">Three big themes for the quarter: faster onboarding, deeper analytics, and a redesigned billing experience.</p>
                                        <div class="cover-card__footer">
                                            <span class="cover-card__author">
                                                <img src="images/icon/avatar-05.jpg" alt="">
                                                Cynthia Harvey &middot; 5 min read
                                            </span>
                                            <a href="#" class="m-btn m-btn--ghost" style="height: 30px; padding: 0 12px; font-size: 12.5px;">Read</a>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <article class="m-card cover-card">
                                    <img class="cover-card__image" src="images/bg-title-01.jpg" alt="">
                                    <div class="cover-card__body">
                                        <span class="cover-card__tag" style="background: var(--m-c4-soft); color: var(--m-c4);">Design</span>
                                        <h3 class="cover-card__title">A new visual system for 2026</h3>
                                        <p class="cover-card__text">Refreshed colour tokens, an Inter-based type scale, and the soft-tinted accent palette across every surface.</p>
                                        <div class="cover-card__footer">
                                            <span class="cover-card__author">
                                                <img src="images/icon/avatar-06.jpg" alt="">
                                                Michelle Moreno &middot; 12 min read
                                            </span>
                                            <a href="#" class="m-btn m-btn--ghost" style="height: 30px; padding: 0 12px; font-size: 12.5px;">Read</a>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>

                        <!-- ROW 4: Pricing cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">PRICING CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-md-4">
                                <section class="m-card pricing-card">
                                    <p class="pricing-card__tier">Starter</p>
                                    <p class="pricing-card__price">$0<small>/mo</small></p>
                                    <p class="pricing-card__period">For solo builders</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> 1 user seat</li>
                                        <li><i class="fa-solid fa-check"></i> 5 projects</li>
                                        <li><i class="fa-solid fa-check"></i> Community support</li>
                                        <li><i class="fa-solid fa-check"></i> 1 GB storage</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--ghost" style="width: 100%;">Choose Starter</button>
                                </section>
                            </div>
                            <div class="col-md-4">
                                <section class="m-card pricing-card pricing-card--featured">
                                    <span class="pricing-card__badge">Most popular</span>
                                    <p class="pricing-card__tier">Pro</p>
                                    <p class="pricing-card__price">$24<small>/mo</small></p>
                                    <p class="pricing-card__period">For small teams</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> Up to 10 users</li>
                                        <li><i class="fa-solid fa-check"></i> Unlimited projects</li>
                                        <li><i class="fa-solid fa-check"></i> Priority email support</li>
                                        <li><i class="fa-solid fa-check"></i> 100 GB storage</li>
                                        <li><i class="fa-solid fa-check"></i> Advanced analytics</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--primary" style="width: 100%;">Choose Pro</button>
                                </section>
                            </div>
                            <div class="col-md-4">
                                <section class="m-card pricing-card">
                                    <p class="pricing-card__tier">Enterprise</p>
                                    <p class="pricing-card__price">Custom</p>
                                    <p class="pricing-card__period">For larger orgs</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> Unlimited users</li>
                                        <li><i class="fa-solid fa-check"></i> SSO &amp; SCIM</li>
                                        <li><i class="fa-solid fa-check"></i> 24/7 dedicated support</li>
                                        <li><i class="fa-solid fa-check"></i> Audit logs</li>
                                        <li><i class="fa-solid fa-check"></i> Custom contract</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--ghost" style="width: 100%;">Talk to sales</button>
                                </section>
                            </div>
                        </div>

                        <!-- ROW 5: Notification / status cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">NOTIFICATION CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-md-6">
                                <section class="m-card notice-card notice-card--info">
                                    <span class="notice-card__icon"><i class="fa-solid fa-circle-info"></i></span>
                                    <div class="notice-card__body">
                                        <h3 class="notice-card__title">New version deployed</h3>
                                        <p class="notice-card__text">Version 3.1.0 is live. Includes the new analytics dashboard and a redesigned billing flow.</p>
                                        <div class="notice-card__actions">
                                            <button type="button" class="m-btn m-btn--ghost" style="height: 28px; padding: 0 10px; font-size: 12px;">Release notes</button>
                                            <button type="button" class="m-btn m-btn--ghost" style="height: 28px; padding: 0 10px; font-size: 12px;">Dismiss</button>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card notice-card notice-card--success">
                                    <span class="notice-card__icon"><i class="fa-solid fa-circle-check"></i></span>
                                    <div class="notice-card__body">
                                        <h3 class="notice-card__title">Backup completed</h3>
                                        <p class="notice-card__text">Your weekly backup finished in 2m 14s. 4.2 GB of data was archived to the off-site vault.</p>
                                    </div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card notice-card notice-card--warning">
                                    <span class="notice-card__icon"><i class="fa-solid fa-triangle-exclamation"></i></span>
                                    <div class="notice-card__body">
                                        <h3 class="notice-card__title">Storage almost full</h3>
                                        <p class="notice-card__text">You&rsquo;re using 82% of your 100 GB plan. Consider upgrading or pruning old projects to avoid hitting the cap.</p>
                                        <div class="notice-card__actions">
                                            <button type="button" class="m-btn m-btn--primary" style="height: 28px; padding: 0 10px; font-size: 12px;">Upgrade plan</button>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <div class="col-md-6">
                                <section class="m-card notice-card notice-card--danger">
                                    <span class="notice-card__icon"><i class="fa-solid fa-circle-xmark"></i></span>
                                    <div class="notice-card__body">
                                        <h3 class="notice-card__title">Payment failed</h3>
                                        <p class="notice-card__text">Your card ending in &middot;&middot;&middot;&middot; 4242 was declined. Please update your billing details to keep your subscription active.</p>
                                        <div class="notice-card__actions">
                                            <button type="button" class="m-btn m-btn--primary" style="height: 28px; padding: 0 10px; font-size: 12px; background: var(--m-danger); border-color: var(--m-danger);">Update card</button>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>

                        <!-- ROW 6: List + chart preview cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">LIST &amp; PREVIEW CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-lg-6">
                                <section class="m-card" style="padding: 0;">
                                    <header class="m-card__header" style="padding: 18px 20px;">
                                        <div>
                                            <h2 class="m-card__title">Recent uploads</h2>
                                            <p class="m-card__subtitle">Files added to your workspace this week.</p>
                                        </div>
                                        <a href="#" class="m-btn m-btn--ghost" style="height: 30px; padding: 0 10px; font-size: 12.5px;">All files</a>
                                    </header>
                                    <ul class="card-list">
                                        <li>
                                            <div class="card-list__main">
                                                <span class="card-list__icon" style="background: var(--m-c1-soft); color: var(--m-c1);"><i class="fa-regular fa-file-lines"></i></span>
                                                <div>
                                                    <span class="card-list__title">Q2 roadmap.pdf</span>
                                                    <span class="card-list__sub">2.4 MB &middot; updated 12 min ago</span>
                                                </div>
                                            </div>
                                            <span class="card-list__meta">John D.</span>
                                        </li>
                                        <li>
                                            <div class="card-list__main">
                                                <span class="card-list__icon" style="background: var(--m-c2-soft); color: var(--m-c2);"><i class="fa-regular fa-image"></i></span>
                                                <div>
                                                    <span class="card-list__title">brand-marks-v3.zip</span>
                                                    <span class="card-list__sub">38 MB &middot; updated 2 hours ago</span>
                                                </div>
                                            </div>
                                            <span class="card-list__meta">Michelle M.</span>
                                        </li>
                                        <li>
                                            <div class="card-list__main">
                                                <span class="card-list__icon" style="background: var(--m-c3-soft); color: var(--m-c3);"><i class="fa-solid fa-table"></i></span>
                                                <div>
                                                    <span class="card-list__title">may-revenue.xlsx</span>
                                                    <span class="card-list__sub">182 KB &middot; updated yesterday</span>
                                                </div>
                                            </div>
                                            <span class="card-list__meta">Diane M.</span>
                                        </li>
                                        <li>
                                            <div class="card-list__main">
                                                <span class="card-list__icon" style="background: var(--m-c4-soft); color: var(--m-c4);"><i class="fa-solid fa-display"></i></span>
                                                <div>
                                                    <span class="card-list__title">board-deck-may.pptx</span>
                                                    <span class="card-list__sub">14 MB &middot; updated 2 days ago</span>
                                                </div>
                                            </div>
                                            <span class="card-list__meta">Cynthia H.</span>
                                        </li>
                                        <li>
                                            <div class="card-list__main">
                                                <span class="card-list__icon"><i class="fa-regular fa-folder"></i></span>
                                                <div>
                                                    <span class="card-list__title">Customer interviews</span>
                                                    <span class="card-list__sub">12 files &middot; updated 3 days ago</span>
                                                </div>
                                            </div>
                                            <span class="card-list__meta">Robert T.</span>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <div class="row row-tight">
                                    <div class="col-md-6">
                                        <article class="m-card preview-card">
                                            <div class="preview-card__head">
                                                <p class="preview-card__label">Active sessions</p>
                                                <span class="stat-card__icon stat-card__icon--c1"><i class="fa-solid fa-users"></i></span>
                                            </div>
                                            <p class="preview-card__value">8,492</p>
                                            <div class="preview-card__chart"><canvas id="card-spark-1"></canvas></div>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article class="m-card preview-card">
                                            <div class="preview-card__head">
                                                <p class="preview-card__label">API requests</p>
                                                <span class="stat-card__icon stat-card__icon--c2"><i class="fa-solid fa-bolt"></i></span>
                                            </div>
                                            <p class="preview-card__value">412k</p>
                                            <div class="preview-card__chart"><canvas id="card-spark-2"></canvas></div>
                                        </article>
                                    </div>
                                    <div class="col-md-6" style="margin-top: 16px;">
                                        <article class="m-card preview-card">
                                            <div class="preview-card__head">
                                                <p class="preview-card__label">Error rate</p>
                                                <span class="stat-card__icon stat-card__icon--c3"><i class="fa-solid fa-circle-exclamation"></i></span>
                                            </div>
                                            <p class="preview-card__value">0.18%</p>
                                            <div class="preview-card__chart"><canvas id="card-spark-3"></canvas></div>
                                        </article>
                                    </div>
                                    <div class="col-md-6" style="margin-top: 16px;">
                                        <article class="m-card preview-card">
                                            <div class="preview-card__head">
                                                <p class="preview-card__label">Latency p99</p>
                                                <span class="stat-card__icon stat-card__icon--c4"><i class="fa-regular fa-clock"></i></span>
                                            </div>
                                            <p class="preview-card__value">182<small style="font-size: 14px; color: var(--m-text-muted); font-weight: 500;"> ms</small></p>
                                            <div class="preview-card__chart"><canvas id="card-spark-4"></canvas></div>
                                        </article>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ROW 7: Accent rail cards -->
                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">ACCENT RAIL CARDS</h5>
                        <div class="row row-tight">
                            <div class="col-md-6 col-lg-3">
                                <section class="m-card accent-card">
                                    <h3 class="m-card__title" style="margin-bottom: 6px;">Brand</h3>
                                    <p style="margin: 0; font-size: 13px; color: var(--m-text-muted); line-height: 1.5;">A simple card with a brand-blue left rail. Use it to call attention without going loud.</p>
                                </section>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <section class="m-card accent-card accent-card--success">
                                    <h3 class="m-card__title" style="margin-bottom: 6px;">Success</h3>
                                    <p style="margin: 0; font-size: 13px; color: var(--m-text-muted); line-height: 1.5;">Green accent rail for positive states &mdash; goal hit, payment received, deploy succeeded.</p>
                                </section>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <section class="m-card accent-card accent-card--warning">
                                    <h3 class="m-card__title" style="margin-bottom: 6px;">Warning</h3>
                                    <p style="margin: 0; font-size: 13px; color: var(--m-text-muted); line-height: 1.5;">Amber rail for &ldquo;heads up&rdquo; states &mdash; storage filling, deadline approaching, etc.</p>
                                </section>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <section class="m-card accent-card accent-card--danger">
                                    <h3 class="m-card__title" style="margin-bottom: 6px;">Danger</h3>
                                    <p style="margin: 0; font-size: 13px; color: var(--m-text-muted); line-height: 1.5;">Red rail for failures &mdash; payment declined, integration broken, deploy failed.</p>
                                </section>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
