Listing rows: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/listing-rows.html Core Patterns (https://patternpaste.com/patterns/) Listings (https://patternpaste.com/patterns/listings/) Free Standard # 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. Five rows, hand-written in core blocks rather than a query loop, so it works for jobs, events, episodes, documents or search results with nothing installed. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The rows. Each row is one group: copy it, paste it, edit the four fields inside it. - The action label. "Apply" is one word out of nine possible ones; see the table above. - The left column. Dates suit an events or careers index, a number suits episodes and lessons, a short word suits a directory. - The two meta fields. They are ordinary paragraphs in a wrapping row, so a third one is a paste away, and the row still collapses correctly on a phone. - The section head. "Open roles" and the sentence under it set the register for the whole index. The signature moment ## The action rests on the rule The signature is that the action is the only thing on the row that is not type at rest, and it sits on the row's hairline. Every row is a group with a single currentColor bottom border, and every field on it is bare type: a tracked date at the left, a title, two small meta fields. Then, at the right, one boxed label. Its column is bottom-aligned, and the row carries no bottom padding of its own, so the box's lower edge lands exactly on the hairline that closes the row. Read down the section and the boxes make a second vertical line of their own, each one standing on a rule, which is a structural mark and a density contrast in the same move. Neither depends on having a colour to work with, which is the point of this catalogue. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Every rule and every border. ### Set by this pattern - Full bleed with its own measure. - The proportion of the row. - How the row collapses. - The type ramp. - Nothing over 15px is a preset. 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 A repeating ruled row for any index a visitor scans and then acts on. Five rows under a short section head, each carrying a date or label, an entry title, two meta fields and one action. It is built to sit in the middle of a page: it states its own ground and its own vertical padding, so it borrows no air from whatever is above or below it. The copy ships as a jobs index because that is the commonest use, but the shape is deliberately generic. See "What else this row is" below. ### The signature moment: the action rests on the rule The signature is that the action is the only thing on the row that is not type at rest, and it sits on the row's hairline. Every row is a group with a single currentColor bottom border, and every field on it is bare type: a tracked date at the left, a title, two small meta fields. Then, at the right, one boxed label. Its column is bottom-aligned, and the row carries no bottom padding of its own, so the box's lower edge lands exactly on the hairline that closes the row. Read down the section and the boxes make a second vertical line of their own, each one standing on a rule, which is a structural mark and a density contrast in the same move. Neither depends on having a colour to work with, which is the point of this catalogue. Nothing else on the row is boxed, filled or ruled. That is what makes one box per row read as the action rather than as decoration. Make it yoursVariations and the edits to make first ### What to change first - The rows. Each row is one group: copy it, paste it, edit the four fields inside it. Deleting a row deletes its rule with it, because the rule is the row's own bottom border rather than a separate block. - The action label. "Apply" is one word out of nine possible ones; see the table above. Then select the label and link it. - The left column. Dates suit an events or careers index, a number suits episodes and lessons, a short word suits a directory. Keep it short: the column is 16% wide and a long value wraps. - The two meta fields. They are ordinary paragraphs in a wrapping row, so a third one is a paste away, and the row still collapses correctly on a phone. - The section head. "Open roles" and the sentence under it set the register for the whole index. Keep the heading to one or two lines at this ramp. ### The variation Night rows inverts the section: your contrast becomes the ground and your base becomes the type. It moves the colour axis and nothing else, so the composition, the ramp and the row proportions are identical to the base's. The hairlines and the action's box are currentColor, so they invert without being touched. Inversion is the one colour move that arrives in every theme, because base and contrast are the only slugs every block theme defines. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. In a serif theme the dates and meta read as a printed timetable, in a geometric sans they read as an interface; both were the intended outcome. - 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 itself guarantees. Nothing here can resolve to nothing. - Your spacing scale. The row's air, the gap between the columns and the section padding are all spacing presets, so a theme with a generous scale gets a looser index and a tight one gets a denser one. - Every rule and every border. The row hairlines and the action's box are currentColor, so they follow your text wherever your theme puts it, and they invert when the section does without being told to. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a section rather than another column of body text. The section head is held to 34rem by a nested constrained group, so the lede is a paragraph someone reads rather than a line running the full band. - The proportion of the row. 16% for the date, 62% for the title and meta, 22% for the action. - How the row collapses. Core stacks columns below 782px, and this row is designed for it rather than left to it. At 390 the three columns become date, then title with its meta beneath, then the action, in that reading order, and the boxed action still lands on the hairline that closes the row, so the row ends the way it ends on a desktop. The two meta fields sit in a wrapping flex group rather than in fixed columns, which is what keeps them from breaking mid-field: a fixed-width flex item in WordPress carries a flex-basis and no flex-shrink: 0, so it shrinks anyway and a five-field row lands in a pile. - The type ramp. Titles are a clamp() set tight with negative tracking. The date and the meta are the opposite decision: at or above 15px, uppercase, widely tracked, with the date tracked further than the meta so the two do not read as one class of thing. Nothing sits between the title and them, which is what makes the collision read. - Nothing over 15px is a preset. Core's small preset is 13px, which is below what anyone should have to read. Every label here states its own clamp() with a 15px floor. Technical notesBlock mechanics, responsive behaviour and constraints ### What else this row is The template audit ranked this shape as the largest single coverage gap in the catalogue, because one row serves nine page types that were otherwise unbuildable. The fields are the same in every one of them; only the words change. | Page type | The left column | Meta one | Meta two | The action | |---|---|---|---|---| | Careers index (as shipped) | closing date | location | salary | Apply | | Events listing | event date | venue | ticket price | Book | | Podcast episodes | episode number | duration | series | Listen | | Real estate index | date listed | area | price | View | | Documentation index | version | section | last updated | Read | | Search results | date | type | source | Open | | Case-study index | year | sector | outcome | Read the case | | Course lesson list | lesson number | length | level | Start | | Community activity | date | group | replies | Join | A buyer renames four things and has a different index: the left column, the two meta fields and the action label. Nothing structural moves, which is why this is one pattern rather than nine. ### The action is text, not a button The action is a paragraph inside a bordered group, not a core/button, and that was a decision. Three reasons, in order of weight: - A core/button carrying typography attributes does not stay valid across editor versions, because the button moved its typography styles from the outer div to the inner anchor between versions, and the action needs the same tracked uppercase treatment as the rest of the row. - A button's fill is the theme's, and five filled buttons down a ruled index would be the loudest thing on the page. The signature depends on exactly one quiet box per row. - Like everything in this catalogue, the pattern ships without links. The action is a text label you select and link, so it takes your theme's link colour when you do, inside a box that stays currentColor. ### Notes - Core blocks only: group, paragraph, heading, separator, 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 dates, the meta and the action label, all of which are small text. The titles clear the 3:1 large-text floor at every viewport, because both are the same contrast on base pair the theme already uses for body copy. - The opening separator carries is-style-wide. Without it Twenty Twenty-Four renders a separator as a centred 100px stub instead of a rule, and nothing reports it. The row rules are group borders rather than separators, which is the other portable shape and the one that lets a rule belong to the row it closes. Questions ## Listing rows: common questions Does Listing rows need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Listing rows match my theme? Choose by variation. Ruled index and Night rows take your theme’s palette; Velvet and gold brings its own colours. How many variations does Listing rows have? 3: Ruled index, Night rows and Velvet and gold. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Listing rows 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. Which WordPress version does it need? 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. 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/) ## 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 button, buttons, column, columns, group, heading, paragraph, separator Presets color 6, spacing 6, font-size 3 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 ### 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. Listings Preview pattern (https://patternpaste.com/pattern/listing-cards.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) Shot in Twenty Twenty-Five Listings No plugin needed ### Event ticket stack Three community workshop tickets form a stepped stack, each event body joined to a narrow date stub by a perforated seam. Listings Preview pattern (https://patternpaste.com/pattern/listings-ticket-stack.html)