references/layouts/binary-comparison.md
1.3 KB查看排版效果| 1 | # binary-comparison |
| 2 | |
| 3 | Side-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 |
文件内容是平台检查时读出的文本，只供查看。平台不会运行包里的任何脚本或程序。
