Build Assets
Hero Pattern

Feature Section

Mid-page section showcasing a specific product feature with visual support.

Platform: webTags: features, section, product, mid-page

Layout

Two-column, alternating sides across multiple sections. Text + visual alternate left/right every other feature. 80px vertical spacing between sections.

Content Slots

optional

Section label

Short functional category ("Collaboration", "Speed"). Eyebrow above headline.

required

Feature headline

24–32px, bold. States the benefit, not the feature. "See everything at once" not "Dashboard view".

required

Feature description

16–18px body text, 2–4 sentences. Expands on the headline benefit.

required

Feature visual

Screenshot, animation, or diagram of the feature in context.

optional

Feature CTA

Optional inline link ("Learn how →") for more detail.

Hierarchy Rules

  • Feature headline = primary element of each section
  • Visual and text should be roughly equal visual weight — neither dominates
  • Consistent visual treatment across all feature sections — same style, same scale
  • Alternating layout creates natural reading rhythm — don't break it without reason

Source Topic

design systems

Pattern Variations and Visual Hierarchy

Using a loudness scale to organize variations and prevent visual competition