Exploring card density tradeoffs — current vs. 3 compact variations
| Option | Key Changes | Height Savings | Pros | Cons | Best For |
|---|---|---|---|---|---|
| Current | Baseline — py-1.5 padding, p-3 highlight boxes, space-y-3 gap | — | Spacious, comfortable | Only 2 cards above fold; highlight boxes add ~40px per card | Content-forward storytelling |
| Option A | Tighter padding only — py-1, p-2 highlight boxes, space-y-2 gap | ~15% per card | Low-risk, preserves all content; easy to implement atomically | Marginal gain — still only 2–3 cards visible; highlight boxes remain large | Safe starting point if unsure |
| Option B | Option A + 3:1 image ratio + single-line highlight + xs event buttons | ~25% per card | 3.5 cards visible; images still present; single-line highlight teases content | Very wide 3:1 images can crop badly on photos; highlight truncation hides context | High-volume feeds, power users |
| Option C | Option A padding + remove highlight boxes on community/tip posts; keep event detail boxes | ~25–30% per card | Cleanest layout; body text does the work; event details preserved where functional; consistent card rhythm | Community context boxes lost; tip posts lose their visual distinction from plain body text | Instagram-style feeds; users who scan quickly |
Option C produces the cleanest result with the most visible cards — the highlight boxes on community posts were decorative repetition of body text anyway. Event detail boxes are kept because they contain structured, functional data (date/time/location) that readers need at a glance. If the loss of community context boxes feels like too much, Option A is a safe minimal step. Option B's ultra-wide 3:1 images are risky because most neighborhood photos (storefronts, murals, street scenes) are taller than that crop allows.