Article header with plate
The article header for a piece that earns a photograph. Headline and standfirst sit on the page surface, the plate runs past the measure to the right edge, and the meta ledger breaks back across its corner.
Use it when
The article header for a piece that earns a photograph. Headline and standfirst sit on the page surface, the plate runs past the measure to the right edge, and the meta ledger breaks back across its corner.
- Category
- Heroes
- Layout archetype
- Overlap
- Page position
- hero (derived)
- Purpose
- explain (derived)
- Field
- light (derived)
- Interaction
- static (derived)
- Motifs
- Elevation frame, Ledger pair, Held column
Content it requires
- A headline of 8 to 12 words
- A standfirst of 25 to 40 words
- A pillar, two dates, and a reading time
- A wide image
Do not use it when
- No label above the headline. The pillar reads in the ledger, where it is information rather than decoration.
- Shares the overlap archetype with HRO-07. Never both on one page.
- For articles without an image use HRO-04, which is built for exactly that and does not leave a hole.
- The plate runs off the right edge. Do not crop a subject into that margin.
Variants
None. Colour swaps and mirrored alignment do not count as variants.
Implementation
src/components/patterns/HeroArticlePlate.astro
---
import HeroArticlePlate from '../components/patterns/HeroArticlePlate.astro';
---
<HeroArticlePlate />Import directly. Do not route production through patternComponents.
This specimen is rendered with Pattern Lab demo props (headingTag) that a production page should replace with its own content.
Production usage
Not yet used on a production page. Nothing here has been proven in front of a customer.
Accessibility
- Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
- No interactive controls beyond links and buttons inherited from the design system.
- Colour never carries meaning alone: every state marker is paired with text.
- Motion respects prefers-reduced-motion.