Facts beside the title, Pattern Paste Canonical: https://patternpaste.com/pattern/page-header-facts.html Library (https://patternpaste.com/patterns/) Page header (https://patternpaste.com/patterns/page-header/) Catalogue access Standard # Facts beside the title An interior-page opening that splits in two: a small tracked kicker and the page title hold the left 46% on their own, and the right 54% carries four facts as a ruled ledger, label against value on each line, divided by currentColor hairlines and closed by one at the foot. The label and value hold their two columns at every width rather than stacking, so the ledger reads as a record beside the name of the thing. No action, no image and no coloured band. States no colour and no font of its own. Start here ## What to change first - The four facts. Label and value are separate paragraphs in separate columns, so a fact can be anything: location and contract for a role, date and venue for an event, client and year for a project. - The kicker. One or two words. - The title. Built for four to six words at this size, on a 46% measure. - The split. If your facts are short and your title is long, 54/46 the other way is two attribute edits and the ledger still holds. The signature moment ## The facts are a ledger, not a row Nothing here is a chip and nothing here is a row. Each fact is one line with a currentColor hairline above it, the label in the left 42% of the ledger and the value in the right 58%, and the last line carries a rule below it as well so the ledger closes. Four rules and four rows, aligned on one pair of columns: the shape of a record, in the half of the header where a lesser design would put a photograph. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The title's size. ### Set by this pattern - Full bleed with a 1240px measure - 46/54. - 42/58 inside the ledger - The title is deliberately quiet. - h1 with its own colour - Bottom aligned. 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 The opening of an interior page whose facts matter as much as its name, split in two: a kicker and the title hold the left 46% on their own, and the right 54% carries the facts as a ruled ledger, label against value, one line each. A job posting, an event, a document, a project. Core blocks only: core/group, core/paragraph, core/heading, core/columns, core/column. ### The signature moment: the facts are a ledger, not a row Nothing here is a chip and nothing here is a row. Each fact is one line with a currentColor hairline above it, the label in the left 42% of the ledger and the value in the right 58%, and the last line carries a rule below it as well so the ledger closes. Four rules and four rows, aligned on one pair of columns: the shape of a record, in the half of the header where a lesser design would put a photograph. The split is what the pattern is for. A title on its own left half has room to be a title, and facts in a column read down rather than across, which is how somebody actually checks whether a role is in the right city for the right money. page-header-meta puts the same four facts on one horizontal row under the title, where they scan as a line of record; this puts them beside it, where they scan as a list to be checked. Same facts, two different readings, and the choice is the page's, not the palette's. The labels and values never stack. The ledger's inner core/columns carries isStackedOnMobile: false, so at 390 the label keeps its 42% and the value its 58% instead of collapsing into eight alternating lines. At a 350px measure that is roughly 140px of label against 190px of value: enough for a tracked label in caps, and enough for two or three words of value before it wraps inside its own column. A theme with a large body size will wrap the longer values to two lines there, and the ledger is still a ledger, because the rule belongs to the line rather than to the type in it. The outer split is the one that gives way: core stacks the 46/54 columns below 782px, so the title arrives first and the ledger follows it whole. Every rule in the section is currentColor, so the whole device is the colour of the text and cannot drift from it: ink on paper in a light theme, pale on ink in a dark one, and no slug a theme might not define. ### Why it is not a hero No action, no image, no coloured band. The ground asks for base, which is the page's own paper. A vacancy page's apply button belongs to the section that carries the job description, not to the line that names it. Make it yoursVariations and the edits to make first ### What to change first - The four facts. Label and value are separate paragraphs in separate columns, so a fact can be anything: location and contract for a role, date and venue for an event, client and year for a project. A line is one core/group with a top border, so a fifth is a copy of a block; the last line in the ledger is the only one that also carries a bottom border, so move that rule if you add below it. - The kicker. One or two words. It names the kind of page, which is what lets the title be the specific thing. - The title. Built for four to six words at this size, on a 46% measure. - The split. If your facts are short and your title is long, 54/46 the other way is two attribute edits and the ledger still holds. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated. The labels carry 0.22em and 0.2em of tracking and the values carry -0.01em, which is where the record feeling comes from rather than from a chosen face. - Your colours. base for the paper, contrast for the type, both chains ending on a colour WordPress guarantees; the kicker and the labels take role-label and fall through to the same contrast. Every rule is currentColor. - Your spacing scale. The band's padding, the gap between the two halves when they stack and the air inside every ledger line are spacing presets. - The title's size. x-large as a two-rung chain with a tuned clamp() behind it, so the title sits on the theme's own ladder one rung under a display heading. ### What it decides for itself - Full bleed with a 1240px measure, so the header is a band rather than a column of text. - 46/54. The ledger gets the larger half, because a label and a value on one line need more room than four or five words of title do. Both widths are stated, because here the two halves are a proportion rather than a column and a remainder. - 42/58 inside the ledger, and that it holds at every width. - The title is deliberately quiet. It tops out at 44px against values at up to 22px, so the facts are set at reading size and the title is only about twice their size. That ratio is the pattern; grow the title and the ledger stops being the thing you read. - h1 with its own colour, because a theme's heading element style beats a colour inherited from the wrapping group. - Bottom aligned. Every label sits on the same baseline as its value, set by verticalAlignment: bottom on the inner columns, so the two type sizes agree along the bottom of each line rather than along the top. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only. No plugin, no script, no separator: every rule is a group border, which cannot be narrowed to a stub the way a plain core/separator is in Twenty Twenty-Four. - The rules are borders on the group wrapping each ledger line, not on a column, so they are on a block whose border support is not in question at the 6.6 floor. 12KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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)Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html) #### Before you paste Requires a block theme on WordPress 6.7 to 7.0. 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/) #### What's inside Blocks column, columns, group, heading, paragraph Core only yes Chains 24, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 50, 70 font-size large, x-large Continue exploring ## Next in Page header Explore all 6 Page header patterns (https://patternpaste.com/patterns/page-header/) Shot in Twenty Twenty-Five Page header Page header Cover Standard ### Page header cover strip An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph. 6 blocks Open preview (https://patternpaste.com/pattern/page-header-cover-strip.html) Shot in Twenty Twenty-Five Page header Page header Standard ### Page header lap An interior-page opening with a tracked breadcrumb on an inverted band, then the page title and one line of orientation on a sheet of your base that laps over the band's lower edge. 3 blocks Open preview (https://patternpaste.com/pattern/page-header-lap.html) Shot in Twenty Twenty-Five Page header Page header Standard ### Page header meta An interior-page opening for a page whose facts matter as much as its name: a small tracked kicker, a title set deliberately low, and four facts on one ruled row beneath it, divided by currentColor hairlines rather than boxed into chips. 5 blocks Open preview (https://patternpaste.com/pattern/page-header-meta.html)