crypto bitcoin ticker prices widget crypto ticker bitcoin price market widget coin prices sparkline display crypto prices show bitcoin price ticker cryptocurrency market overview
Crypto Ticker Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/currency-widget/crypto-ticker.json crypto-ticker.html
<div class="ws-currency-widget rounded-2xl border p-6 max-w-sm mx-auto"
style="background: var(--ws-currency-widget-bg); color: var(--ws-currency-widget-text); border-color: var(--ws-currency-widget-border);">
<h2 class="text-lg font-semibold tracking-tight mb-4"
style="color: var(--ws-currency-widget-text);">Crypto Markets</h2>
<div class="divide-y" style="--tw-divide-opacity: 1; border-color: var(--ws-currency-widget-border);">
<!-- BTC -->
<div class="flex items-center justify-between py-3 gap-3">
<div class="flex items-center gap-3">
<span class="text-xl" aria-hidden="true">₿</span>
<div class="flex flex-col">
<span class="text-sm font-semibold" style="color: var(--ws-currency-widget-text);">Bitcoin</span>
<span class="text-xs" style="color: var(--ws-currency-widget-text-muted);">BTC</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-end gap-px h-4" aria-hidden="true">
<span class="w-0.5 rounded-full" style="height: 40%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 60%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 45%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 80%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 100%; background: var(--ws-currency-widget-positive);"></span>
</div>
<div class="flex flex-col items-end">
<span class="text-sm font-semibold tabular-nums" style="color: var(--ws-currency-widget-text);">$87,432.10</span>
<span class="text-xs font-medium tabular-nums" style="color: var(--ws-currency-widget-positive);">+2.34%</span>
</div>
</div>
</div>
<!-- ETH -->
<div class="flex items-center justify-between py-3 gap-3">
<div class="flex items-center gap-3">
<span class="text-xl" aria-hidden="true">⟠</span>
<div class="flex flex-col">
<span class="text-sm font-semibold" style="color: var(--ws-currency-widget-text);">Ethereum</span>
<span class="text-xs" style="color: var(--ws-currency-widget-text-muted);">ETH</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-end gap-px h-4" aria-hidden="true">
<span class="w-0.5 rounded-full" style="height: 70%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 55%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 65%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 40%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 35%; background: var(--ws-currency-widget-negative);"></span>
</div>
<div class="flex flex-col items-end">
<span class="text-sm font-semibold tabular-nums" style="color: var(--ws-currency-widget-text);">$3,241.87</span>
<span class="text-xs font-medium tabular-nums" style="color: var(--ws-currency-widget-negative);">-1.12%</span>
</div>
</div>
</div>
<!-- SOL -->
<div class="flex items-center justify-between py-3 gap-3">
<div class="flex items-center gap-3">
<span class="text-xl" aria-hidden="true">◎</span>
<div class="flex flex-col">
<span class="text-sm font-semibold" style="color: var(--ws-currency-widget-text);">Solana</span>
<span class="text-xs" style="color: var(--ws-currency-widget-text-muted);">SOL</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-end gap-px h-4" aria-hidden="true">
<span class="w-0.5 rounded-full" style="height: 30%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 50%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 70%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 85%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 100%; background: var(--ws-currency-widget-positive);"></span>
</div>
<div class="flex flex-col items-end">
<span class="text-sm font-semibold tabular-nums" style="color: var(--ws-currency-widget-text);">$187.54</span>
<span class="text-xs font-medium tabular-nums" style="color: var(--ws-currency-widget-positive);">+5.67%</span>
</div>
</div>
</div>
<!-- ADA -->
<div class="flex items-center justify-between py-3 gap-3">
<div class="flex items-center gap-3">
<span class="text-xl" aria-hidden="true">⬡</span>
<div class="flex flex-col">
<span class="text-sm font-semibold" style="color: var(--ws-currency-widget-text);">Cardano</span>
<span class="text-xs" style="color: var(--ws-currency-widget-text-muted);">ADA</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-end gap-px h-4" aria-hidden="true">
<span class="w-0.5 rounded-full" style="height: 60%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 50%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 55%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 70%; background: var(--ws-currency-widget-positive);"></span>
<span class="w-0.5 rounded-full" style="height: 75%; background: var(--ws-currency-widget-positive);"></span>
</div>
<div class="flex flex-col items-end">
<span class="text-sm font-semibold tabular-nums" style="color: var(--ws-currency-widget-text);">$0.7821</span>
<span class="text-xs font-medium tabular-nums" style="color: var(--ws-currency-widget-positive);">+0.89%</span>
</div>
</div>
</div>
<!-- DOT -->
<div class="flex items-center justify-between py-3 gap-3">
<div class="flex items-center gap-3">
<span class="text-xl" aria-hidden="true">●</span>
<div class="flex flex-col">
<span class="text-sm font-semibold" style="color: var(--ws-currency-widget-text);">Polkadot</span>
<span class="text-xs" style="color: var(--ws-currency-widget-text-muted);">DOT</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-end gap-px h-4" aria-hidden="true">
<span class="w-0.5 rounded-full" style="height: 80%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 65%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 50%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 55%; background: var(--ws-currency-widget-negative);"></span>
<span class="w-0.5 rounded-full" style="height: 45%; background: var(--ws-currency-widget-negative);"></span>
</div>
<div class="flex flex-col items-end">
<span class="text-sm font-semibold tabular-nums" style="color: var(--ws-currency-widget-text);">$9.43</span>
<span class="text-xs font-medium tabular-nums" style="color: var(--ws-currency-widget-negative);">-3.21%</span>
</div>
</div>
</div>
</div>
<p class="mt-3 text-xs text-right"
style="color: var(--ws-currency-widget-text-muted);">Updated: Mar 22, 2026 · 14:32 UTC</p>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cryptobitcointickerpriceswidget
Cryptocurrency market ticker displaying five coins with current price, 24-hour percentage change in green or red, and CSS-only mini sparkline bar charts. Compact list layout with clean dividers.