# Listing cards > Six priced items as a grid of cards, each a 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. Canonical: https://patternpaste.com/pattern/listing-cards.html Section: Listings Access: Free, and free to keep. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, group, heading, image, paragraph Keywords: listing, cards, price, menu, courses, tickets, catalogue, products, grid ## Variations (3) ### Price stack (the default) Identical markup in every theme. Your base as the ground and your contrast as the type. The title sits directly above the figure, so the drop from a 16px name to a 60px number happens in one step, and the foot rule is currentColor. ### Biscuit and rust This variation states its own colours and states its own type: identical in every theme. A bakery look: states a warm biscuit ground, cocoa brown type and rust prices and actions, with Rockwell slab names and prices over Gill Sans, six priced bakes from a York counter. ### Figure shelf Identical markup in every theme. The same six cards with the composition changed rather than the colours: the title and the figure share one bottom-aligned line instead of stacking, so the card's type reads as a ruled shelf, name at the left and number at the right, above the same foot rule. Useful when the names are short and you want the column of numbers to line up down the grid. --- ## 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 is not 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 button 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 does not stay valid across editor versions, and because six filled buttons in a grid would out-shout the figures the card is built around. ## 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 - **Replaceable photographs.** The image blocks include example image URLs, with `aspectRatio: 4/3` and `scale: cover` already set. Choose Replace to select your own files; each is cropped to the proportion the grid needs. - **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. ## The variation **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. ## The Styled look **Biscuit and rust** is a bakery counter: biscuit `#f3e4c8` ground, cocoa `#3a2417` type (11.6:1) and rust `#9a3f16` prices, label and actions (5.4:1), with Rockwell slab names and prices over Gill Sans. The composition is the base's; the six cards carry loaves, buns and a Saturday bread box from a York counter. ## Notes - 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 type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.5rem, 4.4vw, 3.75rem) ## Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose **Replace** to use your own Media Library files. See [image credits](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. The figure-shelf title and price use a wrapping core Row. Where both do not fit on one line, the complete price moves below the title rather than breaking its digits across lines.