Content

Alerts, badges, banners, cards, the items grid, labelled lists, media objects, pushes and surtitles.

Overview

The nine content components, the three that are meant to nest, and the two colour patterns they follow.

Alert

An inline notification block, with ten colour variants and an automatic horizontal layout when it leads with an icon.

Badge

A small inline label, with ten solid colour variants and hover styles reserved for links.

Banner

A centred modifier on .alert, for site-wide announcements.

Card

A self-contained content card, the tokens it hands down to its media, and the whole-card link pattern.

Items

A responsive grid whose column count is intrinsic rather than breakpoint-driven.

List

A compact labelled list, with the label as a sibling of the list rather than inside it.

Media

The structural base for images and video, holding the aspect ratio, plus the logo and icon variants.

Push

A video or image with text laid over it, how the push places its text box, the position and darken modifiers, and the…

Surtitle

An eyebrow label above a heading, tightened automatically when it sits inside a card.