StockCard

components/ui/stock-card.tsx

A watchlist quote. The price is the one thing sized to be read from across the room, the change carries a direction icon and a sign as well as a colour, and the sparkline is measured against the previous close rather than drawn as decoration. Every figure uses tabular numerals so a column of cards lines up, the session is always stated so a stale quote cannot pass for a live one, and the whole card renders on the server with no client JavaScript.

Up on the day

Down on the day

Direction is an icon and a signed number before it is a colour, and the dashed rule inside the sparkline is the previous close, so the trace says how far above or below it sat all session.

Flat

An unchanged quote gets a neutral reading rather than a token green, because nothing happened.

No history yet

A newly listed or thinly traded name keeps the chart's height and shows the baseline alone, so a grid of cards does not go ragged.

RDDT, Reddit, Inc.

Pre-market

Reddit, Inc.

$46.12

Up +1.62(+3.64%)

No recent price history

As of 8:14 AM ET

Long company name

The name truncates on one line so it can never push the price or the chart out of position.

Another currency

Price formatting follows the currency and locale it is given rather than assuming dollars.

Loading

The skeleton holds the real card's height, including the chart, so a watchlist does not jump when quotes arrive.

Loading quote

In a watchlist

The density case: four quotes in a grid, with the prices on one axis and the changes on another, so a red row is findable without reading a single label.