News card

Anatomy

Image on top, then a body with three elements stacked at Padding/Small (12 px) inside Padding/Medium (16 px).

Body

Category tag — Caption 1 on background/2, 2 px radius
Headline — Title 4 in-container, 20/22 ExtraBold
Date — the overline style, pinned to the foot

The date sits at the bottom regardless of how many lines the headline takes, so a row of cards keeps its dates on one line.

Fig. 1State=Default, Grid=3-column, Size=Extra — 434×405.

Fig. 2State=Hover — brand border plus a lift to `background/2`, the same treatment as the product card.

The overline

Dates use a style named simply overline: Roboto Regular 12 px, 100 % line height, set in caps — and with 1.5 px letter-spacing.

That tracking matters more than it sounds. Every other type style in the system — all five titles, both subtitles, all three body sizes, both captions — carries letterSpacing: 0. This is the only exception in the entire type system.

It is also the only style not filed under type system/ or Web/. It sits at the root of the collection with no prefix at all.

December 16, 2022

Above: overline, 1.5px tracking. Below: the same at 0. The tracking is what makes it read as a label rather than as small body text.

Fig. 3The system’s only non-zero letter-spacing.

State × Grid × Size

Twelve variants from three properties — the most heavily specified component in the system, and like Images with overlay text, the naming behaves.

Grid says how many fit across; Size picks Extra or Default within that; State is Default or Hover.

Note the card gets taller as the grid gets wider — 2-column cards are 508 px, 4-column are 343 px — because the image height scales with the card width while the body stays fixed.

Grid	Size=Extra	Size=Default
2-column	656 × 508	566 × 458
3-column	434 × 405	374 × 371
4-column	324 × 343	279 × 340

Fig. 4Each cell also has a Hover state, giving twelve variants.

Live grid

Three across, collapsing to two below 768 px. Hover any card.

Fig. 5Dates stay on a common baseline even though the headlines run to different lengths.

News information box

The same card with the image removed — a 434×162 block for sidebar lists such as “Most visited”. Tag, headline and date, nothing else.

Hover is identical to the news card: brand border plus a lift to background/2.

Most visited What to pick as your cordless drill for home projects December 16, 2022 Most visited Choosing the right angle grinder disc November 30, 2022

Fig. 6news-Information-Box, Size=Extra. Hover either.

A compact 326×130 row: square thumbnail on the left, date above headline on the right. Two states, Default and Hover.

Hover fills to background/2 but draws no border — unlike the news card and information box, which both add a brand-red outline.

Fig. 7Related-article rows. Hover to see the fill.

Responsive behaviour

Because the column count is a component property rather than a breakpoint rule, the library lays out each Grid value separately at every breakpoint.

In code that inverts: one card, and the grid decides how many fit. The Grid property becomes a class on the container.

Breakpoint	Container	Cards	Card width
Large	1320	3	434
Large	1140	3	374
Medium	960	3	314
Medium	720	3	234
Small	540	2–3	266
Small	326	2–3	159

Fig. 8Card width is the container less the gaps, divided by the column count. Widths are fixed per breakpoint in the library, but they all follow that rule.

Markup

The date uses margin-top: auto so it stays at the foot whatever the headline does.

<a class="rx-news" href="/news/cordless-drill">
  <span class="rx-news__media"><img src="drill.jpg" alt=""></span>
  <span class="rx-news__body">
    <span class="rx-news__tag">Guides</span>
    <span class="rx-news__title">What to pick as your cordless drill</span>
    <time class="rx-news__date" datetime="2022-12-16">December 16, 2022</time>
  </span>
</a>

<!-- Grid is a container class, not a card property -->
<div class="rx-news-grid rx-news-grid--3">…</div>