stock ticker strip horizontal finance ticker strip marquee stocks horizontal scroll show multiple stock prices in a row scrolling ticker bar
Stock Ticker Strip
Fetch pattern JSON:
curl https://webspire.de/patterns/stock-widget/ticker-strip.json ticker-strip.html
<div
class="ws-stock-widget flex items-stretch divide-x overflow-x-auto rounded-2xl border"
style="
--ws-stock-widget-bg: oklch(0.98 0.005 75);
--ws-stock-widget-text: oklch(0.25 0.02 75);
--ws-stock-widget-text-soft: oklch(0.45 0.015 75);
--ws-stock-widget-text-muted: oklch(0.6 0.01 75);
--ws-stock-widget-border: oklch(0.9 0.01 75);
--ws-stock-widget-positive: oklch(0.55 0.15 155);
--ws-stock-widget-negative: oklch(0.55 0.15 25);
background: var(--ws-stock-widget-bg);
color: var(--ws-stock-widget-text);
border-color: var(--ws-stock-widget-border);
divide-color: var(--ws-stock-widget-border);
"
>
<!-- Stock 1 -->
<div class="flex flex-1 items-center gap-3 px-5 py-3.5">
<div>
<p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">AAPL</p>
<p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Apple</p>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$178.72</p>
<p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+1.33%</p>
</div>
</div>
<!-- Stock 2 -->
<div class="flex flex-1 items-center gap-3 px-5 py-3.5">
<div>
<p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">MSFT</p>
<p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Microsoft</p>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$415.30</p>
<p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+0.87%</p>
</div>
</div>
<!-- Stock 3 -->
<div class="flex flex-1 items-center gap-3 px-5 py-3.5">
<div>
<p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">GOOGL</p>
<p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Alphabet</p>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$153.48</p>
<p class="text-xs font-semibold" style="color: var(--ws-stock-widget-negative)">-0.52%</p>
</div>
</div>
<!-- Stock 4 -->
<div class="flex flex-1 items-center gap-3 px-5 py-3.5">
<div>
<p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">TSLA</p>
<p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">Tesla</p>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$248.91</p>
<p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+2.14%</p>
</div>
</div>
<!-- Stock 5 -->
<div class="flex flex-1 items-center gap-3 px-5 py-3.5">
<div>
<p class="text-sm font-bold" style="color: var(--ws-stock-widget-text)">NVDA</p>
<p class="text-xs" style="color: var(--ws-stock-widget-text-muted)">NVIDIA</p>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$892.15</p>
<p class="text-xs font-semibold" style="color: var(--ws-stock-widget-positive)">+3.21%</p>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
stocktickerstriphorizontalfinance
A horizontal ticker strip that displays multiple stock symbols with their prices and change indicators in a compact row. Works well as a banner at the top of finance pages or dashboards where real-time market data needs to be visible at all times.