Feature accordion with product interface

Use it when

An immersive colour field, features disclosed one at a time, and the product rendered beside them as a real surface rather than a photograph of a screen.

Category

Plan and record proof

Layout archetype

Offset grid

Page position

middle

Purpose

prove

Field

colour

Interaction

accordion

Motifs

Register, Quiet field, Condition marker

Content it requires

• Three to five features
• A body of 20 to 35 words each
• Four to six real plan rows with a horizon and a state
• A provenance line for the plate

Do not use it when

• Every row in the plate is a claim about the product. Invented rows read as a fake screenshot and are worse than no plate.
• Mint is the accent field and appears once per page. This pattern spends it.
• The plate does not change as features open. Making it respond needs JavaScript this pattern avoids.
• Centred opening. Do not run on the same page as PRC-06 or DIF-05, which also centre.

Variants

Shares PatternAccordion with PRC-06 and DIF-05. Plate rows and meta are props, so the same skeleton shows a visit record or a scope sheet.

Implementation

src/components/patterns/ProofRecordPlateDisclosure.astro

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

<ProofRecordPlateDisclosure />

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.
• 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.