feature-section-patterns

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.