Feature Filter
Built for the way you hire
Content guidance
Usage
Audience-segmented feature deep-dive. Each tab is a fully-formed Feature Dense block — accordion of items + pinned media + a tab-level CTA. Use when the *features themselves are the same but the framing changes per audience* (SMB vs enterprise vs staffing), or when the product surface is large enough that a single Feature Dense would feel crowded.
Tab labels
Each tab accepts tab_title + an optional
tab_title_short. The short variant renders on mobile
where horizontal space is tight; the long variant takes over at
the medium breakpoint. The CSS swap is responsive — no SSR/CSR
flicker.
Per-tab content
Each tab is a full Feature Dense composition: a one-paragraph description, an accordion of items (each with media + heading + description + CTA), and a tab-level chevron link. See Feature Dense for content guidance on items.
Note on hue cycling
XDS production cycles each tab's MediaTile through three complementary subtheme hues. The docs port leans on the active theme cascade instead — every tab inherits the same primary blend. Revisit when block-level dataset hue overrides land.
Variants
Align media
align_media="start" Built for the way you hire
align_media="end" Built for the way you hire
Background
background_color="background" Built for the way you hire
background_color="background.weaker" Built for the way you hire
Content model
| Field | Type | Choices / Reference | Default | Required | Multi | ||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Section Header | Group | — | — | — | |||||||||||||||||||||||||||||||||||||||||||
section_header — nested schema
| |||||||||||||||||||||||||||||||||||||||||||||||
| Tabs | Group | — | — | yes | |||||||||||||||||||||||||||||||||||||||||||
tabs — nested schema
| |||||||||||||||||||||||||||||||||||||||||||||||
| Background Color | Dropdown | background (White), background.weaker (Light Gray (Neutral 100)) | background | — | — | ||||||||||||||||||||||||||||||||||||||||||
| Align Media | Dropdown | start, end | start | — | — | ||||||||||||||||||||||||||||||||||||||||||