Revenue Card with Currency
A copy-paste kpi & dashboard widgets component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
KPI & Dashboard WidgetsHTMLCSSany framework
Total Revenue
USD2,847,500
MRR$237.3K
ARR$2.85M
Growth+23%
Copy into your project
HTML
<div class="nuda-kpi-revenue">
<div class="nuda-kpi-revenue__top">
<div>
<div class="nuda-kpi-revenue__label">Total Revenue</div>
<div class="nuda-kpi-revenue__val">
<span class="nuda-kpi-revenue__currency">USD</span>
2,847,500
</div>
</div>
<svg class="nuda-kpi-revenue__icon" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="8" fill="rgba(228,255,84,.1)"></rect>
<path d="M12 6v12M9 9h4.5a1.5 1.5 0 0 1 0 3H9m0 0h5.25a1.5 1.5 0 0 1 0 3H9" stroke="#e4ff54" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</div>
<div class="nuda-kpi-revenue__row">
<div class="nuda-kpi-revenue__seg">
<span class="nuda-kpi-revenue__seg-label">MRR</span>
<span class="nuda-kpi-revenue__seg-val">$237.3K</span>
</div>
<div class="nuda-kpi-revenue__seg">
<span class="nuda-kpi-revenue__seg-label">ARR</span>
<span class="nuda-kpi-revenue__seg-val">$2.85M</span>
</div>
<div class="nuda-kpi-revenue__seg">
<span class="nuda-kpi-revenue__seg-label">Growth</span>
<span class="nuda-kpi-revenue__seg-val nuda-kpi-revenue__seg-val--up">+23%</span>
</div>
</div>
</div>CSS
.nuda-kpi-revenue {
background: linear-gradient(135deg,#1a1a1a,#161a00);
border: 1px solid rgba(228,255,84,.12);
border-radius: 16px;
padding: 1.2rem 1.4rem;
display: flex;
flex-direction: column;
gap: .9rem;
min-width: 240px;
}
.nuda-kpi-revenue__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.nuda-kpi-revenue__label {
color: #777;
font-size: .73rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: .25rem;
}
.nuda-kpi-revenue__val {
color: #fafafa;
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.03em;
display: flex;
align-items: baseline;
gap: .35rem;
}
.nuda-kpi-revenue__currency {
color: #777;
font-size: .75rem;
font-weight: 600;
}
.nuda-kpi-revenue__icon {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.nuda-kpi-revenue__row {
display: flex;
gap: .5rem;
padding-top: .7rem;
border-top: 1px solid rgba(255,255,255,.07);
}
.nuda-kpi-revenue__seg {
flex: 1;
display: flex;
flex-direction: column;
gap: .2rem;
}
.nuda-kpi-revenue__seg-label {
color: #555;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.nuda-kpi-revenue__seg-val {
color: #cfcfcf;
font-size: .85rem;
font-weight: 600;
}
.nuda-kpi-revenue__seg-val--up {
color: #e4ff54;
}
How to use Revenue Card with Currency
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.