49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
# 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
|