# Article opener > The opening of a long read: a ruled strip of tiny metadata, a headline set as large as the section allows beneath it, a standfirst, and a first paragraph that opens with a drop cap at a strict reading measure. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/article-opener.html Section: Editorial 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: group, heading, paragraph, separator Keywords: editorial, article, opener, drop cap, standfirst, headline, long-form Promise: Identical markup in every theme. --- ## The signature moment: the strip against the headline The section opens with the two smallest things in it, a pair of hairlines with three 13px uppercase labels between them, and the next thing the eye meets is a headline at up to 100px with -0.045em tracking on a 0.96 line height. Nothing sits between those two sizes. The collision is the design: the strip reads as the masthead of a publication and the headline as the thing it published. The drop cap that opens the body repeats the move one level down, a single letter at several lines' height against 18px prose. The drop cap is core's own `dropCap` attribute and core's own styling for it (`float: left`, `8.4em`, `line-height: .68`, `font-weight: 100`), so it takes the theme's face and, where the theme restyles `.has-drop-cap`, the theme's size. That is inheritance doing its job: in a face with no thin weight it falls back to regular, and the letter is still several lines tall. ## How the widths work The band is `56rem` wide, which is what the headline and the metadata strip span. Everything a visitor reads is narrower: the standfirst and byline sit in a nested `core/group` whose constrained layout has `contentSize: 38rem` and `justifyContent: left`, and the body paragraphs in another at `34rem`. Core's layout CSS caps each child at the group's content size and, with `left`, pins it to the group's left edge instead of centring it, so the narrow blocks share the headline's left edge and release to full width wherever the band is narrower than they are. No `vw` sizes a box; the `vw` terms are inside `clamp()` and size type only, so characters per line holds when the root size changes. **Why not `padding-right: max(0rem, 100% - 34rem)` on the paragraph itself.** That was the first draft, borrowed from `content-columns`, and it is wrong on a direct child of a constrained band: the paragraph is `content-box`, so its padding sits OUTSIDE the layout's `max-width`, the box grows to the band's full width and centring puts its left edge at the band's padding edge, 144px left of the headline at 1400. Measured on the rendered page: the standfirst at `left: 50px, width: 1300px`, the headline at `left: 252px`. The measure was right and the position was not, and nothing caught it, because what gets measured is a width. The trick is still sound inside a column, where nothing centres the block. The metadata strip is a flex group with `justifyContent: space-between` and `flexWrap: wrap`, so the three labels sit at the edges and the centre on a desktop and wrap into a short stack on a phone without either overflowing. ## What happens at 390 The headline floors at 44px on 0.96, which is four to five lines for this length of copy; keep a replacement to about eight words or the opener becomes a wall of display type. The standfirst and body fill the width. The drop cap floats against three to four lines of body at 17px, which is what it does in print at the same measure. The strip wraps to a stack of three short labels between the same two rules. There are no links and no buttons, so no tap target to clear. ## What it inherits from your theme - **Typeface.** No family is stated. The headline was drawn to hold at 0.96 in a serif face and a sans one; the drop cap is whatever your theme's first letter looks like at 8.4em. - **Palette.** `base` ground, `contrast` text, both two-rung chains ending on a core default. The headline carries its colour explicitly. - **Every rule.** Three `core/separator` blocks stating no colour, so they are `currentColor` in the stock themes and a 2px rule in a theme that styles nothing. - **Spacing rhythm.** Core spacing presets throughout. ## What it decides for itself - **The headline**: `clamp(2.75rem, 7.2vw, 6.25rem)`, weight 700, -0.045em, line-height 0.96. This is the loudest type in the editorial section and it is meant to be. - **The measures**: 38rem for the standfirst, 34rem for the body, in `rem`. - **The strip**: three labels at `max(0.8125rem, 13px)`, 0.2em tracking, between two wide rules with `spacing|20` above and below. Labels under 30 characters are incidental text and get the 12px floor, but the px guard keeps them at 13 whatever the root size does. - **The byline**: `max(0.875rem, 14px)`, because at its length it is read rather than glanced at. ## What you change first 1. **The three labels in the strip.** Kind of piece, reading time, issue or date. Keep each under about 20 characters so the strip stays one line on a desktop. 2. **The headline.** Eight words or fewer. 3. **The standfirst.** One or two sentences that could stand in for the piece. 4. **The body.** The first paragraph keeps `dropCap`; to add paragraphs, copy the second one, which carries the same measure and size without the cap. 5. **The byline.** Replace the placeholder and keep it at or above 14px. ## Contrast Every pair is your `contrast` on your `base`. The headline is large text and clears 3:1; the standfirst, body and labels are held to 4.5:1. The rules carry no text. No accent slug appears in any rung.