HTML
Copy
<div class="duo">
<div><span class="lbl">Gradient ring card</span>
<article class="card dk dk-ring" aria-labelledby="dk-mira">
<span class="dk-av" aria-hidden="true"><span></span></span>
<h3 class="dk-name" id="dk-mira">Mira Solberg</h3>
<p class="dk-handle">Indie game developer · @mirasolberg</p>
<p class="dk-status"><i aria-hidden="true"></i>Open to contract work</p>
<ul class="dk-tags list-unstyled" aria-label="Skills"><li class="badge">Godot</li><li class="badge">Shaders</li><li class="badge">Pixel art</li><li class="badge">Level design</li></ul>
<dl class="dk-stats d-grid gap-2">
<div><dt>games shipped</dt><dd>7</dd></div>
<div><dt>players</dt><dd>310k</dd></div>
<div><dt>jams won</dt><dd>4</dd></div>
</dl>
<div class="dk-actions">
<a class="btn btn-grad" href="#">Hire Mira</a>
<a class="btn btn-outline-secondary" href="#">Portfolio<span class="visually-hidden"> of Mira Solberg</span></a>
</div>
</article></div>
<div><span class="lbl">Developer card with contribution graph</span>
<article class="card dk dk-dev" aria-labelledby="dk-jonah">
<div class="dk-top">
<span class="dk-ini" aria-hidden="true">JR</span>
<div class="dk-who"><h3 class="dk-name" id="dk-jonah">Jonah Reyes</h3><p class="dk-handle">@jreyes · maintainer of tidewave</p></div>
<a class="btn btn-outline-secondary" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="16" height="16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>Follow<span class="visually-hidden"> Jonah Reyes on GitHub</span></a>
</div>
<dl class="dk-row">
<div><dt>repositories</dt><dd>48</dd></div>
<div><dt>stars</dt><dd>12.4k</dd></div>
<div><dt>followers</dt><dd>2,310</dd></div>
<div><dt>sponsors</dt><dd>36</dd></div>
</dl>
<div class="dk-graph">
<p><span><b>1,284</b> contributions in the last 20 weeks</span><span>Busiest on Tuesdays</span></p>
<div class="dk-cells" role="img" aria-label="Contribution graph: 1,284 contributions in the last 20 weeks, rising towards this week, busiest on Tuesdays"><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l3"></i><i class="l1"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l2"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l3"></i><i class="l3"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l3"></i><i class="l4"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l3"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l2"></i><i class="l3"></i><i class="l4"></i><i class="l1"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l4"></i><i class="l4"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l2"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l3"></i><i class="l1"></i><i class="l1"></i><i class="l4"></i><i class="l4"></i><i class="l2"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l2"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l3"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l1"></i><i class="l2"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l4"></i><i class="l4"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i></div>
<div class="dk-key" aria-hidden="true">Less<span></span><i></i><i class="l1"></i><i class="l2"></i><i class="l3"></i><i class="l4"></i><span></span>More</div>
</div>
<ul class="dk-pins list-unstyled" aria-label="Pinned repositories">
<li class="card"><a href="#">tidewave</a><p>Streaming CSV parser that keeps memory flat on 40 GB files.</p><small><i class="rs" aria-hidden="true"></i>Rust · 9.8k stars</small></li>
<li class="card"><a href="#">quiet-forms</a><p>Form validation that announces errors once, in the right place.</p><small><i aria-hidden="true"></i>TypeScript · 1.9k stars</small></li>
</ul>
</article></div>
</div>
CSS
Copy
/* Dark profile cards on Bootstrap .card, .badge, .btn and the grid, in data-bs-theme="dark": a gradient-ring avatar card, and a developer card with a contribution graph drawn from <i> cells
(one accessible label describes the whole graph). Colours are checked for contrast on the near-black card. */
.dk{--dk-card:#12161f;--dk-line:#232a38;--dk-ink:#e8ebf2;--dk-muted:#9aa3b5;--dk-cyan:#22d3ee;--dk-violet:#a78bfa;--dk-chip:#1b2130;
--bs-card-bg:var(--dk-card);--bs-card-border-color:var(--dk-line);--bs-card-border-radius:22px;--bs-card-inner-border-radius:21px;color:var(--dk-ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.dk :where(h3,p,ul,dl,dd,dt){margin:0}
.dk ul{padding:0}
/* gradient ring card */
.dk-ring{padding:30px 26px 26px;text-align:center;overflow:hidden}
.dk-ring::before{content:"";position:absolute;inset:0 0 auto;height:160px;background:radial-gradient(60% 100% at 50% 0,rgba(34,211,238,.18),transparent 70%);pointer-events:none}
.dk-av{position:relative;display:block;width:108px;height:108px;margin:0 auto;padding:4px;border-radius:50%;background:conic-gradient(from 140deg,var(--dk-cyan),var(--dk-violet),#f472b6,var(--dk-cyan))}
.dk-av span{display:block;width:100%;height:100%;border:4px solid var(--dk-card);border-radius:50%;
background:radial-gradient(circle at 30% 28%,#fef3c7 0,transparent 30%),radial-gradient(circle at 70% 75%,#f472b6 0,transparent 45%),linear-gradient(140deg,#0e7490,#6d28d9)}
.dk .dk-name{position:relative;margin-top:16px;line-height:normal;font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.dk-handle{margin-top:2px;font-size:.9rem;color:var(--dk-muted)}
.dk-status{align-self:center;display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:5px 12px;border:1px solid rgba(74,222,128,.35);border-radius:999px;background:rgba(74,222,128,.08);color:#86efac;font-size:.8rem;font-weight:600}
.dk-status i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.dk-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;margin-top:16px}
.dk-tags .badge{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:600;--bs-badge-color:#c9d1df;--bs-badge-border-radius:8px;background:var(--dk-chip);line-height:normal}
.dk-stats{grid-template-columns:repeat(3,1fr);margin-top:20px}
.dk-stats>div{display:flex;flex-direction:column-reverse;gap:2px;padding:12px 6px;border-radius:14px;background:var(--dk-chip)}
.dk-stats dd{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.dk-stats dt,.dk-row dt{font-size:.72rem;font-weight:400;color:var(--dk-muted)}
.dk-actions{display:flex;gap:10px;margin-top:20px}
.dk .btn{--bs-btn-padding-x:14px;--bs-btn-padding-y:11px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.2;--bs-btn-border-width:1.5px;--bs-btn-border-radius:12px;--bs-btn-focus-box-shadow:none;
flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s,border-color .2s,filter .2s}
.dk .btn-outline-secondary{--bs-btn-color:var(--dk-ink);--bs-btn-border-color:#4b5568;--bs-btn-hover-color:var(--dk-ink);--bs-btn-hover-bg:#1b2130;--bs-btn-hover-border-color:#6b7690;--bs-btn-active-color:var(--dk-ink);--bs-btn-active-bg:#232a38;--bs-btn-active-border-color:#6b7690}
.dk .btn-grad{--bs-btn-color:#0a0c11;--bs-btn-hover-color:#0a0c11;--bs-btn-active-color:#0a0c11;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;background:linear-gradient(120deg,var(--dk-cyan),var(--dk-violet))}
.dk .btn-grad:hover{filter:brightness(1.1)}
.dk .btn:focus-visible,.dk a:focus-visible{outline:3px solid var(--dk-cyan);outline-offset:3px}
/* developer card */
.dk-dev{padding:24px}
.dk-top{display:flex;align-items:center;gap:14px}
.dk-ini{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:linear-gradient(140deg,#0e7490,#1e3a8a);color:#fff;font-weight:800}
.dk-who{flex:1;min-width:0}
.dk-who .dk-name{margin-top:0 !important;font-size:1.15rem}
.dk-who .dk-handle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-dev .dk-top .btn{--bs-btn-padding-y:9px;flex:none}
.dk-row{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:.88rem;color:var(--dk-muted)}
.dk-row div{display:flex;flex-direction:row-reverse;gap:5px}
.dk-row dt{font-size:inherit}
.dk-row dd{color:var(--dk-ink);font-weight:800}
.dk-graph{margin-top:20px;padding:16px;border-radius:16px;background:#0e121a;border:1px solid var(--dk-line)}
.dk-graph p{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--dk-muted)}
.dk-graph p b{color:var(--dk-ink)}
.dk-cells{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin-top:12px}
.dk-cells i,.dk-key i{display:block;aspect-ratio:1;border-radius:3px;background:#1b2130}
.dk-cells .l1,.dk-key .l1{background:#0e4d5c}.dk-cells .l2,.dk-key .l2{background:#0f7285}.dk-cells .l3,.dk-key .l3{background:#16a3b8}.dk-cells .l4,.dk-key .l4{background:var(--dk-cyan)}
.dk-key{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:10px;font-size:.75rem;color:var(--dk-muted)}
.dk-key i{width:11px}
.dk-key span{margin:0 4px}
.dk-pins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;list-style:none;margin-top:16px}
.dk-pins .card{--bs-card-bg:transparent;--bs-card-border-color:var(--dk-line);--bs-card-border-radius:14px;padding:14px;color:var(--dk-ink)}
.dk-pins a{color:var(--dk-cyan);align-self:flex-start;font-weight:700;text-decoration:none;border-radius:4px}
.dk-pins a:hover{text-decoration:underline;text-underline-offset:3px}
.dk-pins p{margin-top:6px;font-size:.84rem;line-height:1.45;color:var(--dk-muted)}
.dk-pins small{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.78rem;color:var(--dk-muted)}
.dk-pins small i{width:9px;height:9px;border-radius:50%;background:#3178c6}
.dk-pins small i.rs{background:#dea584}
@media (max-width:480px){.dk-top{flex-wrap:wrap}.dk-dev .dk-top .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.dk .btn{transition:none}}
