1# binary-comparison
2 
3Side-by-side comparison of two items, states, or concepts.
4 
5## Structure
6 
7- Vertical divider splitting image in half
8- Left side: Item A / Before / Pro
9- Right side: Item B / After / Con
10- Mirrored layout for easy comparison
11- Clear visual distinction between sides
12 
13## Variants
14 
15| Variant | Focus | Visual Emphasis |
16|---------|-------|-----------------|
17| **Before-After** | Transformation over time | Temporal change, improvement |
18| **A vs B** | Feature comparison | Direct contrast, differences |
19| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
20 
21## Best For
22 
23- Before/after transformations
24- Product or option comparisons
25- Pros and cons analysis
26- Old vs new comparisons
27- Two perspectives on a topic
28 
29## Visual Elements
30 
31- Strong vertical dividing line or gradient
32- Contrasting colors per side
33- Matching element positions for comparison
34- VS symbol or divider decoration
35- Transformation arrow for before-after
36 
37## Text Placement
38 
39- Main title centered at top
40- Side labels (A/B, Before/After)
41- Corresponding points aligned horizontally
42- Summary at bottom if needed
43 
44## Recommended Pairings
45 
46- `corporate-memphis`: Business comparisons
47- `bold-graphic`: High-contrast dramatic comparisons
48- `craft-handmade`: Friendly explainers
49