OLED Card
True-black background that switches off OLED pixels entirely — paired with a single accent stroke for the active element.
The code
<div class="dm-oled-bg">
<article class="dm-oled">
<span class="dm-oled__tag">NEW</span>
<h3 class="dm-oled__title">Battery saver</h3>
<p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
<button class="dm-oled__btn">Learn more →</button>
</article>
</div> <div class="dm-oled-bg">
<article class="dm-oled">
<span class="dm-oled__tag">NEW</span>
<h3 class="dm-oled__title">Battery saver</h3>
<p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
<button class="dm-oled__btn">Learn more →</button>
</article>
</div>.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
background: #000;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 18px 20px;
color: #ededed;
}
.dm-oled__tag {
display: inline-block;
background: transparent;
color: #4ade80;
border: 1px solid #4ade80;
padding: 2px 8px; border-radius: 4px;
font: 700 9px ui-monospace, monospace;
letter-spacing: 0.12em;
margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
background: none; border: none;
color: #4ade80; padding: 0;
font: 600 12px system-ui, sans-serif; cursor: pointer;
transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; } .dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
background: #000;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 18px 20px;
color: #ededed;
}
.dm-oled__tag {
display: inline-block;
background: transparent;
color: #4ade80;
border: 1px solid #4ade80;
padding: 2px 8px; border-radius: 4px;
font: 700 9px ui-monospace, monospace;
letter-spacing: 0.12em;
margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
background: none; border: none;
color: #4ade80; padding: 0;
font: 600 12px system-ui, sans-serif; cursor: pointer;
transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }