Image and accordion process

Use it when

A photograph of a person at real scale on one side and the process disclosed one step at a time on the other.

Category

Process

Layout archetype

Sticky rail

Page position

middle

Purpose

explain

Field

light

Interaction

accordion

Motifs

Elevation frame, Sequence mark

Content it requires

• Three to five steps
• A body of 25 to 40 words per step
• One photograph of a person

Do not use it when

• Only one step is visible at a time. If the reader has to compare all of them, use PRC-01.
• Exclusive opening relies on the details name attribute. Older browsers allow more than one open, which is degraded rather than broken.

Variants

Shares PatternAccordion with PRF-08 and DIF-05. Same mechanic, different sections: this one is a sequence with human media.

Implementation

src/components/patterns/ProcessDisclosurePlate.astro

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

<ProcessDisclosurePlate />

Import directly. Do not route production through patternComponents. This specimen is rendered with Pattern Lab demo props (imageSrc, imageAlt, imageWidth, imageHeight) 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.
• Interactive. Native elements only, operable by keyboard, with a visible 3px focus ring.
• Colour never carries meaning alone: every state marker is paired with text.
• Motion respects prefers-reduced-motion.