Condition pair

Use it when

Two dated views of the same thing on a shared baseline, divided by one hairline, with a ledger beneath stating what actually changed. Before and after logic without the language of a renovation portfolio.

Category

Plan and record proof

Layout archetype

Inset panel

Page position

middle (derived)

Purpose

prove (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Elevation frame, Ledger pair, Quiet field

Content it requires

• Two images with the same crop and framing
• A date stamp and one line for each
• Three ledger rows on what changed

Do not use it when

• Deliberately not a drag slider. A handle turns a record into a toy and hides half the evidence at any moment.
• The two crops must match. Different framing reads as two properties, not one over time.
• Never present an illustrative pairing as a client result. The caption is load-bearing.

Variants

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

Implementation

src/components/patterns/ProofConditionPair.astro

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

<ProofConditionPair />

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.