# Hero stack rules > An opening section ruled like a ledger: three full-measure bands divided by currentColor hairlines, a tracked eyebrow and a date on the top line, the headline alone in the tall middle band at up to 104px, and a lede with two actions on the closing line. The headline is a row in a table rather than a statement floating in air. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-stack-rules.html Section: Hero Access: Included in Pattern Paste access. 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, group, heading, paragraph Keywords: hero, rules, ledger, banner, headline, eyebrow, event ## Variations (3) ### Ruled (the default) Identical markup in every theme. Your base as the ground and your contrast as the type, with every hairline in currentColor so the rules follow the type your theme sets. Three bands: metadata, headline, lede and actions. ### Night ledger Identical markup in every theme. The colour axis by inversion: your contrast becomes the ground and your base the type. The hairlines follow, because they are currentColor and never state a colour of their own. Both slugs exist in every block theme, so the inversion arrives everywhere. Nothing else moves. ### Doubled rules Identical markup in every theme. The composition changes: the headline is cut in half by a hairline and set across two bands instead of one, so the ledger reads as four rows and the sentence is something the ruling happens to rather than something it frames. --- ## The signature moment: a structural mark **The hero is ruled like a ledger, so the headline is a row in a table rather than a statement floating in air.** Four hairlines run the full 1240px measure and never stop short of it; the headline sits between two of them with nothing else in its band, and its size is decided by the band rather than by the space around it. The move is that a hero normally has no edges at all, and this one is boxed on every horizontal line, which makes the sentence read as an entry rather than as an announcement. ## Rules: group borders, not separators Every hairline is a `border-top` (and one `border-bottom`) on the band's own `core/group`, in `currentColor` at 1px. It is not a `core/separator`, for two reasons. 1. **Twenty Twenty-Four narrows separators.** Its `theme.json` caps any separator that is not `is-style-wide`, `is-style-dots`, `alignwide` or `alignfull` to `var(--wp--preset--spacing--60)`, so a rule authored to span the measure renders as a centred 100px stub and nothing warns you. `is-style-wide` fixes that, and `footer-ledger` chose the border instead because a group's own `style.border` is not touched by the theme rule at all. A signature that depends on the rules reaching the full measure should not depend on remembering a class name. 2. **A border is the band's edge, not a sibling.** The rule and the band's padding are one block, so the gap above and below each hairline is stated once and cannot drift; with separators the spacing lives in a third block between two others and every band's air is authored twice. `currentColor` means the rules follow whatever the theme sets the text to, which is what makes the inverted variation free. ## How the rows work The outer band is `align:full` with its own constrained layout at `1240px` and `blockGap: 0`, so the bands butt and each hairline is a single line rather than a doubled one. - **Top row.** A flex group, `flexWrap: wrap`, `justifyContent: space-between`, `verticalAlignment: center`: the eyebrow at the left edge, the date and place at the right, on one line. It wraps to two short lines on a phone rather than compressing, because WordPress writes `selfStretch: fixed` as `flex-basis` with no `flex-shrink: 0`, so a fixed item in a `nowrap` row breaks mid-word instead of moving. - **Middle row.** A constrained group holding the `h1` and nothing else, with `clamp(2.25rem, 5vw, 4rem)` of padding above and below. The headline runs the full 1240px measure at `clamp(3rem, 7.5vw, 6.5rem)`, weight 700, -0.04em tracking, line-height 1.0. - **Bottom row.** The same flex shape as the top row. The lede is wrapped in a nested `core/group` whose constrained layout is `contentSize: 34rem` and `justifyContent: left`, which holds it to about 70 characters without a `padding-right` trick; the buttons sit at the right. On a phone the row wraps and the buttons land under the lede. ## What happens at 390 The headline floors at 48px on a 1.0 line height, which is about four lines for this length of copy; keep a replacement under about ten words. Both flex rows wrap, so the eyebrow, the date, the lede and the buttons each take their own line, and the hairlines still run the measure because they are the band's own edge and the band is as wide as the column. Buttons are 1rem of vertical padding on a 16px line, comfortably over 44px. ## What it inherits from your theme - **Typeface.** No family is stated. The headline was drawn to hold at 1.0 in a serif face and a sans one. - **Palette.** `base` ground, `contrast` text, both two-rung chains ending on a core default. The heading carries its colour explicitly, because a theme's heading element style beats an inherited group colour. - **Every rule.** `currentColor`, so they are the text colour wherever the theme puts it, and they cannot blank. - **Button hover and focus.** `wp-element-button` takes whatever your theme does. - **Spacing rhythm.** Core spacing presets for the rows; the middle band's air is a `clamp()`, because that band is the composition. ## What it decides for itself - **The four hairlines** and the fact that the section is closed top and bottom. - **The headline**: `clamp(3rem, 7.5vw, 6.5rem)`, weight 700, -0.04em, 1.0. - **The eyebrow and the date**: `max(0.8125rem, 13px)`, weight 600, 0.2em tracking, uppercase. Incidental labels, so a preset floor is enough, and the px guard holds them at 13 whatever the root size does. - **The lede measure**: 34rem, at `clamp(1.0625rem, 1.35vw, 1.25rem)` on 1.55. - **Square buttons**: `border-radius: 0`, because a rounded corner in a ruled band reads as a different section. ## What you change first 1. **The eyebrow and the date.** Keep both under about 30 characters so the top row stays one line on a desktop. 2. **The headline.** Ten words or fewer; it is the only thing in its band and it should fill two or three lines at 1400. 3. **The lede.** One or two sentences. It is capped at 34rem, so more than about forty words makes the closing row taller than the top row by a lot. 4. **The two buttons.** The second is an outline in `currentColor`; delete it and the first stays at the right of the row. ## The variations - **Night ledger** (`night-ledger-rules`) is the colour axis by inversion: `contrast` becomes the ground and `base` the type. The hairlines need no edit, because `currentColor` follows the type. Nothing else moves. - **Doubled rules** (`rules-doubled`) is a composition change. The headline is split across two bands with a hairline between them, at `clamp(2.75rem, 6vw, 5.25rem)` so each half holds one line at 1400, and the ledger reads as four rows. The second half is a `core/paragraph` at the heading's size rather than a second `h1`, so the section still has exactly one first-level heading. ## Contrast Every pair is your `contrast` on your `base`, or the inverse in the night variation. The headline is large text and clears 3:1; the eyebrow, the date, the lede and both buttons are held to 4.5:1. The filled button is `base` on `contrast`, which is the same pair inverted. The hairlines carry no text. No accent slug appears in any rung. ## Display type Off the theme's ladder on purpose, because the size is the composition: - h1 at clamp(2.75rem, 6vw, 5.25rem) - paragraph at clamp(2.75rem, 6vw, 5.25rem)