Value accordion with lifestyle image
Three positions, each in its own panel, opened one at a time beside a photograph of the outcome rather than of the work. The actions sit under the whole section, because the argument earns them, not any single claim.
Use it when
Three positions, each in its own panel, opened one at a time beside a photograph of the outcome rather than of the work. The actions sit under the whole section, because the argument earns them, not any single claim.
- Category
- Difference
- Layout archetype
- Held column
- Page position
- middle
- Purpose
- compare
- Field
- light
- Interaction
- accordion
- Motifs
- Held column, Elevation frame
Content it requires
- Three claims of two to five words
- A one sentence statement per claim
- Two to four substantiating points each
- One lifestyle photograph
- One or two actions
Do not use it when
- Every point has to be something the business genuinely does. The checked list makes substantiation look verified.
- Three claims. A fourth turns separated panels into the card stack the separation exists to avoid.
- Claims over about five words start reading as headings and break the panel rhythm.
- Uses a held opening, so it cannot follow another held section.
Variants
Shares PatternAccordion with PRC-06 and PRF-08. Different section: positions being defended, checked substantiation, lifestyle media.
Implementation
src/components/patterns/DiffClaimLedger.astro
---
import DiffClaimLedger from '../components/patterns/DiffClaimLedger.astro';
---
<DiffClaimLedger />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.