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

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