[Library] Listings

Catalogue accessStandard

Listing cards

Six priced items as a grid of cards, each an empty 4:3 frame over a title set deliberately small and a figure set at display size under it, closed by a hairline and one tracked action. The number is the largest thing on the card and the name is the smallest, which is the inverse of every other card in the library. Hand-written core blocks, so it carries workshops, rooms, tickets, plans or a menu without a plugin. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

Six priced items as a grid of cards, three across and two rows deep, under a short section head. Each card is an empty 4:3 frame, a title, a figure and one action closed by a hairline. It states its own ground and its own vertical padding, so it sits in the middle of a page without borrowing air from its neighbours.

The copy ships as a season of workshops. The shape carries rooms, tickets, courses, plans, services or a menu without a single structural change.

The signature moment

The number is bigger than the name

The signature is a scale collision run the wrong way round: the figure is set at display size against a title set deliberately small. Every other card in this library puts its title at the top of the ramp and its number, if it has one, in the small print. Here the name of the thing is 15 to 17px, quietly tracked, and the price under it runs from 40px to 60px with tight negative tracking. Read the grid and the eye runs down a column of numbers, with the names as captions to them, which is exactly how anyone actually reads a price list. Nothing in between the two sizes, so the drop happens in one step.

It survives having no colour, because the whole move is proportion. In a serif theme the figures read as a printed tariff and in a geometric sans as a fare board; both were the intended outcome.

What it inherits from your theme

  • The typeface. No font family is stated anywhere, so the figures are set in your heading face at whatever weight your theme gives 600.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines, each falling back to a colour WordPress guarantees. Nothing here can resolve to nothing.
  • Your spacing scale. The gap between cards, the air under the picture and the section padding are spacing presets.
  • The foot rule. It is currentColor, so it follows your text and inverts with the section.

What it decides for itself

  • Empty frames. The image blocks ship with no src, exactly as WordPress's own editor writes them before a file is chosen, with aspectRatio: 4/3 and scale: cover already set. Point them at your own media library and whatever you upload is cropped to the proportion the grid needs. The catalogue never bundles a photograph with a pattern.
  • Full bleed with its own measure. The section spans the viewport, holds its content to 1240px, and holds the section head to 34rem with a nested constrained group.
  • Two rows of three, not one row of six. core/columns does not wrap into rows above 782px, so a six-across row would be six slivers. Two rows of three is the shape that scales: delete a card to get five, paste one to get seven.
  • How it collapses. Core stacks columns below 782px, and this grid is designed for that rather than left to it. At 390 each card becomes a full-width band: a wide 4:3 frame, then the small title, then the figure at its 40px floor, then the foot rule and the action. The card keeps its whole composition, because the composition was always vertical; nothing is a side-by-side that has to be undone. The order down the phone is the reading order across the desktop.
  • The type ramp. The title states a clamp() with a 15px floor rather than using core's small preset, which is 13px and below anything a visitor should have to read. The figure is a clamp() at line-height 1 with negative tracking, so a two-line grid of numbers keeps its rhythm.

What to change first

  1. The pictures. Select each frame and choose from your media library. The crop is already set, so nothing else moves.
  2. The figures. They are ordinary paragraphs, so "£180" can become "2 nights", "45 min", "From $90" or "Free". Keep them short: the figure is display size and a long string will wrap.
  3. The titles. One line reads best in the base. If yours run long, use the Figure shelf variation, which handles a long name and a short number better.
  4. The action label. "Book a place" becomes "Reserve", "Enrol", "See the room" or "Add to basket". Then link it.
  5. The count. A card is one column block. Copy the whole column to add one; keep three per row so the frames stay the same width.
What it is not73 words

It is not post-grid. That is an editorial opening: an inset picture in its own mat, a hairline running wider than the picture, a kicker and a date, and no figure and no action anywhere. This card has no mat and no rule under the picture: its single hairline is at the FOOT, under the type, carrying the action. The two patterns are three across on the same measure and share nothing else.

The action is text, not a button67 words

Like everything in this catalogue, the pattern ships without links: the action is a tracked paragraph above the card's foot rule, which you select and link. It is deliberately not a core/button, because a button carrying typography attributes is valid in WordPress 7.0 and marked invalid in the 6.6 editor, and because six filled buttons in a grid would out-shout the figures the card is built around.

The variation110 words

Figure shelf changes the composition rather than the colours. The title and the figure stop stacking and share one bottom-aligned line: the name at the left of the card, the number at the right, above the same foot rule. That turns each card's type into a ruled shelf and lines the numbers up down the right-hand edge of every column, which is what you want when the names run long and the figures are short. The row does not wrap, so a long title takes two lines and the number stays where it is. Everything else in the file, including the frames, the rule and the action, is the base's.

Notes101 words
  • Core blocks only: group, paragraph, heading, image, columns, column. No plugin, no script, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress guarantees.
  • Contrast is claimed at 4.5:1 for the titles and the action labels, which are small text. The figures clear the 3:1 large-text floor at every viewport; both are the same contrast on base pair the theme already uses for body copy.
  • Type never sits on a photograph here. The frames carry no text at all, so the luminance of whatever a buyer uploads cannot affect a single pair.
Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(2.5rem, 4.4vw, 3.75rem)
Back to the library

Continue exploring

Next in Listings

Explore all 2 Listings patterns