1.2 KiB

Raw Blame History

binary-comparison

Side-by-side comparison of two items, states, or concepts.

Structure

Vertical divider splitting image in half
Left side: Item A / Before / Pro
Right side: Item B / After / Con
Mirrored layout for easy comparison
Clear visual distinction between sides

Variants

Variant	Focus	Visual Emphasis
Before-After	Transformation over time	Temporal change, improvement
A vs B	Feature comparison	Direct contrast, differences
Pro-Con	Advantages/disadvantages	Balanced evaluation

Best For

Before/after transformations
Product or option comparisons
Pros and cons analysis
Old vs new comparisons
Two perspectives on a topic

Visual Elements

Strong vertical dividing line or gradient
Contrasting colors per side
Matching element positions for comparison
VS symbol or divider decoration
Transformation arrow for before-after

Text Placement

Main title centered at top
Side labels (A/B, Before/After)
Corresponding points aligned horizontally
Summary at bottom if needed

Recommended Pairings

corporate-memphis: Business comparisons
bold-graphic: High-contrast dramatic comparisons
craft-handmade: Friendly explainers