Financial Ticker Base

Fetch pattern JSON: curl https://webspire.de/patterns/financial-ticker/base.json

base.html

<div class="ws-financial-ticker border-y border-[var(--ws-financial-ticker-border)] bg-[var(--ws-financial-ticker-bg)]">
  <div class="mx-auto max-w-6xl px-6 py-3.5">
    <!-- Ticker strip — scrolls horizontally on mobile -->
    <div class="flex items-center gap-0 overflow-x-auto [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
      <!-- Fund symbol -->
      <div class="flex shrink-0 items-center gap-3 pr-6 border-r border-[var(--ws-financial-ticker-border)]">
        <span class="text-xs font-black uppercase tracking-[0.15em] text-[var(--ws-financial-ticker-symbol)]">CLOU</span>
        <span class="hidden text-xs text-[var(--ws-financial-ticker-label)] sm:inline">Global Cloud Computing ETF</span>
      </div>

      <!-- NAV -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">NAV</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">$19.72</dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- Market Price -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">Price</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">$19.68</dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- Daily Change -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">1D Change</dt>
        <dd class="flex items-center gap-1 text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-positive)]">
          <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
          +0.81%
        </dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- YTD Change -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">YTD</dt>
        <dd class="flex items-center gap-1 text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-negative)]">
          <svg class="size-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
          −4.32%
        </dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- Expense Ratio -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">Exp. Ratio</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">0.68%</dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- AUM -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">AUM</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">$521M</dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- Holdings -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">Holdings</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">34</dd>
      </dl>

      <div class="h-8 w-px shrink-0 bg-[var(--ws-financial-ticker-border)]"></div>

      <!-- Inception Date -->
      <dl class="flex shrink-0 flex-col items-center px-5 py-1">
        <dt class="text-[10px] font-semibold uppercase tracking-wider text-[var(--ws-financial-ticker-label)]">Inception</dt>
        <dd class="text-sm font-bold tabular-nums text-[var(--ws-financial-ticker-value)]">Jul 2019</dd>
      </dl>

      <!-- Disclaimer note -->
      <p class="ml-auto shrink-0 hidden pl-6 text-[10px] leading-tight text-[var(--ws-financial-ticker-label)] lg:block max-w-xs">
        Data as of prior business day. NAV calculated at 4 PM ET. Past performance not indicative of future results.
      </p>
    </div>
  </div>
</div>

Details

Family

financial-ticker

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

financeetffundtickermetricsdatastriphorizontalinvestmentglobalxklou

Slots

Name	Required	Description
symbol	Yes	Ticker symbol and optional fund name.
metrics	Yes	Any number of dl/dt/dd metric pairs — add, remove, or reorder freely.
disclaimer	No	Fine-print note shown only on wide screens.

Props

Name	Type	Default	Description
positive	string	green	Color for positive return figures.
negative	string	red	Color for negative return figures.

Compact ETF/fund data bar. Renders all key metrics in a single horizontal strip: ticker symbol, NAV, market price, daily change, YTD return, expense ratio, AUM, and holdings count.

Finance domain only — pair with data-table for full holdings breakdown below the fold.