Feature section patterns for marketing sites. Icon grids, alternating layouts, card grids, and feature highlights.
Overview
Feature sections highlight product capabilities and benefits. These patterns use data-layout="grid" for responsive multi-column layouts and data-layout="sidebar" for split content, applied directly to semantic HTML elements without wrapper elements.
Icon Grid
A responsive grid of features with icons. Uses data-layout="grid" with data-layout-min="250px" to create columns that automatically adjust based on available space. The outer <section> combines center and gap via data-layout="center" with data-layout-gap, eliminating a nested stack wrapper.
<section class="features" data-layout="center" data-layout-max="wide" data-layout-gap="2xl">
<header class="features-header" data-layout="stack" data-layout-gap="s">
<h2>Everything you need to build faster</h2>
<p class="lead">Our platform provides all the tools and features you need to ship products quickly without compromising on quality.</p>
</header>
<div data-layout="grid" data-layout-min="250px" data-layout-gap="l">
<div data-layout="stack" data-layout-gap="s">
<span class="feature-icon">
<icon-wc name="zap" size="md"></icon-wc>
</span>
<h3>Lightning Fast</h3>
<p>Optimized for speed with minimal overhead. Your pages load instantly, keeping users engaged.</p>
</div>
<div data-layout="stack" data-layout-gap="s">
<span class="feature-icon">
<icon-wc name="shield" size="md"></icon-wc>
</span>
<h3>Secure by Default</h3>
<p>Built-in security best practices protect your data and your users without extra configuration.</p>
</div>
<!-- Additional features... -->
</div>
</section>
Styling
Icon container styles for the colored icon badges:
Feature rows with image and text that alternate sides. Uses data-layout="sidebar" directly on each <article> with CSS to flip the direction on even rows.
<section class="features" data-layout="center" data-layout-max="wide" data-layout-gap="3xl">
<article class="feature-row" data-layout="sidebar" data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50">
<div data-layout="stack" data-layout-gap="m">
<h2>Intuitive drag-and-drop builder</h2>
<p>Create beautiful layouts without writing code. Our visual builder lets you design pages quickly with a library of pre-built components.</p>
<a href="#" class="feature-link">
Learn about the builder
<icon-wc name="arrow-right" size="sm"></icon-wc>
</a>
</div>
<figure class="feature-image" aria-label="Builder interface">
Builder Preview
</figure>
</article>
<article class="feature-row" data-layout="sidebar" data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50">
<!-- Second row automatically flips via CSS -->
<!-- Same structure, image appears on left -->
</article>
</section>
Styling
A single rule flips the sidebar direction on even rows:
Features displayed in bordered cards with hover effects. Uses data-layout="grid" with <layout-card data-variant="outlined"> for base card styling and a small CSS addition for hover states.
<section class="features" data-layout="center" data-layout-max="wide" data-layout-gap="2xl">
<header class="features-header" data-layout="stack" data-layout-gap="s">
<h2>Built for modern workflows</h2>
<p class="lead">Streamline your development process with features designed to help teams move faster.</p>
</header>
<div data-layout="grid" data-layout-min="280px" data-layout-gap="l">
<layout-card data-variant="outlined" data-padding="l">
<div data-layout="stack" data-layout-gap="m">
<span class="feature-icon">
<icon-wc name="zap" size="sm"></icon-wc>
</span>
<h3>Instant Deploys</h3>
<p>Push to git and your site is live in seconds. Zero-config deployments with automatic rollbacks.</p>
</div>
</layout-card>
<!-- Additional cards... -->
</div>
</section>
Styling
Hover effects on <layout-card> — the component handles base border, padding, and radius:
A spotlight section for a single key feature. Uses data-layout="sidebar" on an <article> with a large image and detailed description including bullet points with checkmarks.
<section class="feature-highlight" data-layout="center" data-layout-max="wide">
<article data-layout="sidebar" data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="45">
<figure class="feature-image" aria-label="AI Assistant interface">
Feature Illustration
</figure>
<div data-layout="stack" data-layout-gap="l">
<layout-badge data-variant="subtle" data-color="primary" data-size="lg">
<icon-wc name="star" size="sm"></icon-wc>
New Feature
</layout-badge>
<h2>Meet your AI-powered assistant</h2>
<p>Our intelligent assistant helps you work smarter, not harder. It learns your preferences over time and provides personalized suggestions.</p>
<ul class="checkmark-list">
<li>
<icon-wc name="check" size="sm"></icon-wc>
<span>Natural language processing understands complex requests</span>
</li>
<li>
<icon-wc name="check" size="sm"></icon-wc>
<span>Learns from your workflow to provide relevant suggestions</span>
</li>
<!-- Additional bullet points... -->
</ul>
<div data-layout="cluster" data-layout-gap="m">
<a href="#" class="button">Try It Free</a>
<a href="#" class="button ghost">Watch Demo</a>
</div>
</div>
</article>
</section>
Icon Grid: Best for listing 4–8 capabilities at a glance. Each item is short — a heading and one sentence.
Alternating Rows: Use when each feature needs a supporting image or illustration. Works well for 2–4 features with deeper descriptions.
Card Grid: Choose when features are peers and benefit from visual separation. Hover effects signal interactivity — pair with links if cards are clickable.
Feature Highlight: Use to spotlight a single flagship feature with a benefit checklist and call-to-action. Place after a grid variant for emphasis.
Combining variants: A common pattern is Icon Grid for an overview, followed by Alternating Rows or a Feature Highlight for deeper dives.
Semantic markup: Use data-layout attributes on semantic elements like <section>, <article>, and <header> instead of nesting layout wrapper elements.