Card

Art on top, the words below on newsprint. One block with no border: a 1px white hairline is all that separates the picture from the newsprint.

#5487

Fund manager workspace

One platform to replace them all, for a bank managing $11 trillion in assets.

Enterprise UXView case →

#5214

Custom debit card creator

A simple, fun way for customers to personalize their card.

MobileView case →

Small

For dense grids, four or more across: .sys-card--sm sets a 20px title and tighter padding. The card can be an <article> when it isn’t a link; then nothing changes on hover.

I-01

Flat vector

Solid fills, no outlines, no gradients.

SVG

M-37

Loaders

Spinner, dots, skeleton and an indeterminate bar.

CSS

M-38

Neon flicker

A sign tube that stutters on.

CSS

Parts

Part	Markup	Look
Card	`a.sys-card` or `article.sys-card`	Newsprint, no border, square
Art	`.sys-card__art` with an `img`, or live artwork	4:3, cropped from the top, black behind; a 1px white hairline below it
Body	`.sys-card__body`	20–24px padding (18px on phones)
Id	`.sys-card__id` (optional)	13px label, muted
Title	`.sys-card__title`	Bold No. 2, sentence case, 26px (20px small, 22px phones)
Text	`.sys-card__text`	16px body
Foot	`.sys-card__foot` with a tag and `.sys-card__more`	Pinned to the bottom, so a row of cards lines up

Stipulations

No border and no rule under the title. The newsprint is the edge. The only line is the 1px white hairline between the art and the words; keep it even when the art is pale. On a newsprint page section, use a Tile instead.
Card or Tile? A card carries a description and a foot; a tile is a picture and a title over the thick rule.
Title is sentence case in Bold No. 2 (see Typography · Case).
A linked card turns its “View” label magenta on hover and scales the image to 1.04; the title stays black. Live artwork doesn’t scale.
Status or category goes in a tag in the foot; the Working tag turns white so it shows on the newsprint.
Cards in a row are the same height; the foot sits at the bottom of each.
Three across on desktop, two on tablet, one on phones. Small cards fill as many 272px columns as fit.

Site variations

Site	Variation	Why
jonesco.com	The homepage work cards (`.work-card`) are where this started; they predate the component and still use their own classes (the site is on 3.4.0)	Moving them to `.sys-card` is a later, separate change
Style specimens	Small cards with live artwork, “Use for / Built with” notes in the body, and a Copy button	A reference page, not a site; it follows the system without being part of it