Feature grid
A feature section: eyebrow, heading and intro over a 2, 3 or 4 column grid of features, set as cells of one hairline-ruled panel, a filled panel or ruled cards, with rows aligned by subgrid.
- Section
- No additional dependencies
Features, services, benefits, and process
Sections for explaining capabilities and benefits. The current collection includes a text-based feature tab section.
Category: Features
Components
6 components
Alternating feature sections
A product tour as a run of text-and-media rows: a compact text column beside a larger framed image, the image swapping sides row by row from lg and stacking under the copy on phones.
- Section
- No additional dependencies
Feature spotlight
One capability given a full section: eyebrow, heading, detailed copy, check-marked points and up to two actions beside a large screenshot or video set in a quiet frame. Media swaps sides at lg; copy stays first.
- Section
- No additional dependencies
Feature tabs
A tabbed feature section: an introduction, an underline tab row, and a panel with the feature copy beside a framed screenshot or product surface, or a points list when there is no media.
- Section
- bits-ui ^2.0.0
Feature card
One capability on a card: an optional icon or framed image, a title with an optional badge, a short description and a detail link pinned to the bottom, so cards in a row line up.
- Section
- No additional dependencies
Process steps
Numbered steps of a linear process for a "How it works" section: a row with a rule running between the markers from 1024 px, a vertical rail below it, and an optional closing action.
- Section
- No additional dependencies
