Skip to content

Perchford design system

Internal, noindex
EDU-09

Journal index with lead

The journal landing page when one piece is doing the positioning work. The lead gets a plate and the full measure, everything after it drops to a ruled register with no image at all.

Untriaged
Open isolated

Use it when

The journal landing page when one piece is doing the positioning work. The lead gets a plate and the full measure, everything after it drops to a ruled register with no image at all.

Category
Education and FAQ
Layout archetype
Stagger
Page position
middle (derived)
Purpose
explain (derived)
Field
light (derived)
Interaction
static (derived)
Motifs
Elevation frame, Register, Held column

Content it requires

  • One lead article with a standfirst of 30 to 50 words and an image
  • Three to eight further articles with pillar, standfirst, and date

Do not use it when

  • The size difference between the lead and the register is the editorial judgment. Levelling it out removes the only signal on the page.
  • One lead. Two competing leads is a magazine cover, not an index.
  • Alternate with EDU-03 rather than replacing it. A date-sorted register is the better page when no single piece is carrying the category.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/EduJournalFeatured.astro

---
import EduJournalFeatured from '../components/patterns/EduJournalFeatured.astro';
---

<EduJournalFeatured />

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.