# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/listing-rows.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: button, buttons, column, columns, group, heading, paragraph, separator Keywords: listing, index, jobs, vacancies, events, episodes, directory, rows, results ## Variations (3) ### Ruled index (the default) Identical markup in every theme. Your base as the ground and your contrast as the type. Every rule is currentColor, so the hairlines follow your text, and the only boxed thing on the page is the action at the end of each row, sitting on the rule. ### Night rows Identical markup in every theme. The colour axis by inversion: your contrast becomes the ground and your base the type. The hairlines and the action's box are currentColor, so they invert with the type without being told to. Both slugs exist in every block theme, so this arrives everywhere. Nothing else moves. ### Velvet and gold This variation states its own colours and states its own type: identical in every theme. States a deep velvet ground, warm white ink and gold Georgia dates, with a square gold Book button or a gold outline Details button on each rule, for a venue or charity what's on list. --- ## 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. ## 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: 1. 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. 2. 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. 3. 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`. ## 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. ## What to change first 1. **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. 2. **The action label.** "Apply" is one word out of nine possible ones; see the table above. Then select the label and link it. 3. **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. 4. **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. 5. **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. ## 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.