Feature Dense
How Indeed helps you hire
Content guidance
Usage
A compact feature story: a single pinned media tile beside an accordion of items. Use when the features are *related* — variants of one product, steps in one workflow — and the page needs to keep them visually anchored as the reader cycles through them.
How it works
On desktop, items collapse into an accordion. Clicking a heading opens its description + CTA and swaps the pinned media tile to match. On mobile, items stack vertically with their media inline — no accordion, no pinning. The first item opens by default.
Media types
Each item's media can be a static image or a Lottie
animation JSON (pass media.json with
contentType: "application/json"). Animated tiles
get a Play / Pause overlay in the tile header.
Block-level description
The description prop renders above the accordion — a
one-paragraph framing for the whole feature set. Keep it short;
the accordion headings carry the real navigation.
Variants
Align media
align_media="start" How Indeed helps you hire
align_media="end" How Indeed helps you hire
Background
background_color="background" How Indeed helps you hire
background_color="background.weaker" How Indeed helps you hire
Content model
| Field | Type | Choices / Reference | Default | Required | Multi | ||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Section Header | Group | — | — | — | |||||||||||||||||||||||||||||||||||||||||||
section_header — nested schema
| |||||||||||||||||||||||||||||||||||||||||||||||
| Description | Text | — | — | — | |||||||||||||||||||||||||||||||||||||||||||
| Feature Dense Items | Global field | feature_dense_item | — | — | yes | ||||||||||||||||||||||||||||||||||||||||||
global_field: feature_dense_item
| |||||||||||||||||||||||||||||||||||||||||||||||
| Background Color | Dropdown | background (White), background.weaker (Light Gray (Neutral 100)) | background | — | — | ||||||||||||||||||||||||||||||||||||||||||
| Align Media | Dropdown | start, end | start | — | — | ||||||||||||||||||||||||||||||||||||||||||