[Library] Listings

Catalogue accessStandard

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.

Variation View
Before you copy
Open in a new window

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

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.

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.
What else this row is213 words

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 button152 words

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 is valid in WordPress 7.0 and marked "unexpected or invalid content" in the 6.6 editor, because the button moved its typography styles from the outer div to the inner anchor between those versions. This catalogue's floor is 6.6, 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.
The variation75 words

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.

Notes134 words
  • 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 shape valid at 6.6 and the one that lets a rule belong to the row it closes.
Back to the library

Continue exploring

Next in Listings

Explore all 2 Listings patterns