Phosphor Card
Card with a glowing accent line on its left edge — the kind of "now playing" highlight that draws the eye in dark dashboards.
The code
<div class="dm-phos-bg">
<article class="dm-phos">
<div class="dm-phos__top">
<span class="dm-phos__live">● LIVE</span>
<span class="dm-phos__count">2,341 watching</span>
</div>
<h3 class="dm-phos__title">React Server Components Deep Dive</h3>
<p class="dm-phos__body">A walk through the boundaries between server and client.</p>
</article>
</div> <div class="dm-phos-bg">
<article class="dm-phos">
<div class="dm-phos__top">
<span class="dm-phos__live">● LIVE</span>
<span class="dm-phos__count">2,341 watching</span>
</div>
<h3 class="dm-phos__title">React Server Components Deep Dive</h3>
<p class="dm-phos__body">A walk through the boundaries between server and client.</p>
</article>
</div>.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
position: relative;
background: #14141f;
border: 1px solid #1f1f30;
border-radius: 10px;
padding: 16px 20px 16px 22px;
overflow: hidden;
}
.dm-phos::before {
content: '';
position: absolute; left: 0; top: 12px; bottom: 12px;
width: 3px;
background: #ec4899;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
font: 700 10px ui-monospace, monospace;
color: #ec4899;
letter-spacing: 0.12em;
}
.dm-phos__count {
font: 500 10px ui-monospace, monospace;
color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; } .dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
position: relative;
background: #14141f;
border: 1px solid #1f1f30;
border-radius: 10px;
padding: 16px 20px 16px 22px;
overflow: hidden;
}
.dm-phos::before {
content: '';
position: absolute; left: 0; top: 12px; bottom: 12px;
width: 3px;
background: #ec4899;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
font: 700 10px ui-monospace, monospace;
color: #ec4899;
letter-spacing: 0.12em;
}
.dm-phos__count {
font: 500 10px ui-monospace, monospace;
color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }More from 12 CSS Dark Mode UI Patterns
Onyx LadderAurora DimEmber PulseOLED CardStealth PanelInkwell ModalCyber TerminalMocha WorkstationForest DimSlate StackCarbon Shelves
View the full collection →