Ticker
A row of figures across the top of a markets page. It scrolls by hand and never animates: a moving number cannot be read.
Markets row
HTML
<div class="p234-ticker">
<a class="p234-ticker__item" href="#"><span class="p234-ticker__name">NGX ASI</span><span class="p234-ticker__value">98,247</span><span class="p234-delta" data-direction="up">0.3%</span></a>
<a class="p234-ticker__item" href="#"><span class="p234-ticker__name">USD/NGN</span><span class="p234-ticker__value">1,512.40</span><span class="p234-delta" data-direction="down">0.8%</span></a>
<a class="p234-ticker__item" href="#"><span class="p234-ticker__name">Brent</span><span class="p234-ticker__value">72.15</span><span class="p234-delta" data-direction="up">1.1%</span></a>
<a class="p234-ticker__item" href="#"><span class="p234-ticker__name">Petrol, Lagos</span><span class="p234-ticker__value">₦1,345</span><span class="p234-delta" data-direction="up">2.4%</span></a>
<a class="p234-ticker__item" href="#"><span class="p234-ticker__name">UBA</span><span class="p234-ticker__value">38.50</span><span class="p234-delta" data-direction="up">1.20</span></a>
</div>It does not move on its own
A marquee that slides is unreadable: by the time a reader finds the figure they want, it has gone. This scrolls by hand like any other row, and the figures stay still long enough to read. It also means nothing to disable under prefers-reduced-motion, because nothing was moving.
Rules
- Six to eight items. It is a glance, not a table.
- Keep figures tabular so they do not shuffle as they update.
- Make every item a link to the page that explains it.
- Use Delta for the change, so direction carries a glyph and not only a colour.
- Do not mix units without labels. A naira move and a percentage move side by side need to say which they are: the NGX feed reports its change field in naira, not per cent.
- Do not put a ticker on an article page. It is for markets and data pages.
- Do not auto-refresh the numbers under the reader without saying when they last changed.
Tokens this component reads
--p234-color-ink--p234-color-ink-muted--p234-color-rule--p234-type-ui-sm-*--p234-type-data-sm-*--p234-space-3--p234-space-4--p234-space-6--p234-border-hairline