Features

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.

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.

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.

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.

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.

Checkmark list styles for benefit bullet points:

• 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.