Read more grid

Use it when

Journal links on a service, city, or home page, where the reader did not come looking for reading. Each entry states in one line who it is for, so the block competes with nothing else on the page.

Category

Education and FAQ

Layout archetype

Register grid

Page position

middle (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Register, Elevation frame

Content it requires

• Exactly three articles
• A one line reason per article naming the situation it fits
• A reading time
• A link to the index

Do not use it when

• Three is the ceiling, not a starting point. A fourth turns a considered recommendation into a feed.
• The reason line has to name a situation. A restated subtitle is filler and reads like one.
• Never place this between a page and its primary call to action. It sends the reader sideways at the worst moment.
• Set withImages to false on a page that already carries several photographs.

Variants

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

Implementation

src/components/patterns/EduReadMoreGrid.astro

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

<EduReadMoreGrid />

Import directly. Do not route production through patternComponents.

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.