| name | feature-section-patterns |
| description | Use when designing feature sections for marketing pages. Covers the canonical patterns (3-up grid, split with media, alternating rows, vertical timeline) and how to choose which fits the content.
|
Feature Section Patterns
Feature sections are the proof under the value-prop. Four main patterns, each for a different content shape.
Pattern 1: 3-up grid
Three (or four) feature cards in a row, each with icon + headline + 1-paragraph description.
When to use: When features are roughly equal in importance.
Optimal count: 3 or 6 (two rows of 3). 4 also works.
Anti-pattern: 9 cards in 3 rows — feels like a feature dump.
Pattern 2: Split with media
Two columns: text on one side, screenshot/illustration on other. Side alternates between features.
When to use: When each feature deserves a deep look + visual.
Optimal count: 3–5 features.
Anti-pattern: Same side every time → monotonous; user banner-blind by feature 3.
Pattern 3: Alternating rows (zig-zag)
Like Pattern 2, but emphasizes the alternation. Each row has its own background tint sometimes.
When to use: When features have distinct visual identities that need framing.
Optimal count: 3 max — gets long.
Pattern 4: Vertical timeline / process
Numbered steps stacked vertically with a connecting line.
When to use: When features describe a process or sequence ("how it works").
Optimal count: 3–5 steps.
Headline patterns within sections
- Outcome-led: "Cut audit prep from 3 weeks to 3 days"
- Promise-led: "Every answer cites 49 CFR"
- Action-led: "Catch DataQ candidates the moment they're contestable"
Avoid: "Robust audit features" (generic, no outcome).
Common mistakes
- Six feature sections in a row, all 3-up grids — visually monotonous
- Stock-photo screenshots that don't match the actual product
- Icons that don't relate to the feature (generic gear, generic chart)
- Feature copy without a verb ("Audit prep" — does WHAT?)
- 12 features at the same level → none feel important
Where this fits in X3 Compass
X3 Compass uses 3-up grids for "6 Brains" (six core workflows), but each card includes an "example query" — pseudo-interactive without imagery overhead.
