Staggered visit strip

Use it when

A year of visits as six views deliberately out of vertical alignment, each with a date and one line. The offsets and the mixed crops are what stop a set of images reading as a tile grid.

Category

Care

Layout archetype

Stagger

Page position

middle (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Elevation frame, Register, Margin note

Content it requires

• Four to six dated entries
• A varied mix of proportions
• One short line per entry

Do not use it when

• The mixed proportions are the pattern. Passing the same ratio to every entry collapses it into a gallery.
• Offsets are removed below 560px, so the strip has to survive as a plain column.
• Six entries is the ceiling. Beyond that use the record filmstrip.

Variants

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

Implementation

src/components/patterns/CareVisitStrip.astro

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

<CareVisitStrip />

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.