Listing cards: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/listing-cards.html Core Patterns (https://patternpaste.com/patterns/) Listings (https://patternpaste.com/patterns/listings/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The pictures. Select each frame and choose from your media library. - The figures. They are ordinary paragraphs, so "£180" can become "2 nights", "45 min", "From $90" or "Free". - The titles. One line reads best in the base. - The action label. "Book a place" becomes "Reserve", "Enrol", "See the room" or "Add to basket". - The count. A card is one column block. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The foot rule. ### Set by this pattern - Replaceable photographs. - Full bleed with its own measure. - Two rows of three, not one row of six. - How it collapses. - The type ramp. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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 photography workshops, each paired with a relevant visual reference. 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. Make it yoursVariations and the edits to make first ### What to change first - The pictures. Select each frame and choose from your media library. The crop is already set, so nothing else moves. - 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. - 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. - The action label. "Book a place" becomes "Reserve", "Enrol", "See the room" or "Add to basket". Then link it. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.5rem, 4.4vw, 3.75rem) Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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. ### 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 (https://patternpaste.com/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. Questions ## Listing cards: common questions Does Listing cards need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Listing cards match my theme? Choose by variation. Price stack and Figure shelf take your theme’s palette; Biscuit and rust brings its own colours. How many variations does Listing cards have? 3: Price stack, Biscuit and rust and Figure shelf. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Listing cards free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Listings Access Free Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, image, paragraph Presets color 5, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in Listings Explore all 15 Listings patterns (https://patternpaste.com/patterns/listings/) Shot in Twenty Twenty-Five Listings No plugin needed ### Events date tiles Upcoming events as tear-off calendar leaves: each tile has a month strip with the weekday, the day of the month as a big numeral, the event’s title, its time and price, and a ruled book link at the foot, all tiles level at every width. Listings Preview pattern (https://patternpaste.com/pattern/events-date-tiles.html) Shot in Twenty Twenty-Five Listings No plugin needed ### Listing rows A repeating ruled row for any index a visitor scans and acts on: a tracked date or label hanging in its own narrow column, the entry title beside it, two meta fields under the title, and one boxed action resting on the row's hairline at the right. Listings Preview pattern (https://patternpaste.com/pattern/listing-rows.html) Shot in Twenty Twenty-Five Listings No plugin needed ### Listings cover programme An event poster as a full-bleed cover: a heavy veil of your theme's contrast colour over the photograph, a huge event title with its dates and venue set in the top left, and below it, across the cover's full width, a dated programme of five sessions as ruled rows, each a day and time, a session title and a place. Listings Preview pattern (https://patternpaste.com/pattern/listings-cover-programme.html)