Pill-bordered toggle button that reveals (expanded) or hides (collapsed) a block of additional content below it
Figma: Flight Finder screen 4713:25117 · node expander-flight finder-advanced search · file key: psH738AqHDxuMyFm897f9r (dated snapshot, captured 2026-06-26) · expanded content confirmed 2026-07-02 from the live file owEYzHf7FrHRvWC2u82UOl node 4361:5537 (D44)
Primitive tier — expand/collapse disclosure control. The expander is a full-width pill button with a
navy border and a down-pointing caret. Default state is collapsed — the content block is hidden. Tapping the
trigger reveals the content with a 24px gap below the trigger row. The caret rotates 180° in the open state. Currently
only one usage in Figma: "Advanced Search" fields in the Flight Finder screen.
Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r ·
Node: expander-flight finder-advanced search in Flight Finder (4713:25117) · captured 2026-06-26
Live CSS Preview
Collapsed (default)
Expanded (open) — with placeholder content
States
State
Figma name
Caret direction
Content block
Collapsed
Default
Pointing down (⌄)
Hidden — 0 height, no gap
Expanded
Open
Pointing up (⌃) — rotate 180°
Visible — 24px gap below trigger, full content rendered
Design Tokens
Outer wrapper
Direction
flex-col
Gap (trigger → content)
24 px (--medium)
Horizontal padding
0 px (--none)
Vertical padding
16 px (--xsmall)
Width
100% (full content width)
Trigger row
Border color
interactive/blue-dk #05273e
Border width
1 px
Border radius
38 px (pill)
Horizontal padding
16 px (--xsmall)
Vertical padding
12 px (--xxsmall)
Layout
flex-row · space-between
Label text
Font family
Futura PT Demi
Font size
15 px (--font-size/other/button)
Color
text/primary #05273e
Letter spacing
0.6 px
Text transform
uppercase
Caret icon
Container size
12 × 12 px
Icon aspect
14 : 7 (wider than tall)
Color
text/primary #05273e
Expanded rotation
rotate(180deg)
Layer Tree
└── .alpa-expander · BUTTON · flex-col · gap-24px · py-16px · px-0 · full-width
├── .alpa-expander__trigger · FRAME · flex-row · space-between · px-16px py-12px · border:1px #05273e · rounded-38px
├── ├── .alpa-expander__label · TEXT · Futura PT Demi 15px · #05273e · uppercase · tracking-0.6px
├── └── .alpa-expander__caret · ICON · 12×12px · caret down · rotate(180deg) when open
└── .alpa-expander__content · FRAME · hidden when collapsed · visible (gap-24px below trigger) when open
└── [slot content — e.g. form fields for Advanced Search]
Usage
Screen
Label text
Revealed content
Notes
Flight Finder search (4713:25117)
"Advanced Search"
Avoid Connection field · Connect Via field · Min Connection Time range slider · Length of Travel range slider · 3 checklist rows (Search by Arrival Date / Include Cargo Carriers / Show Codeshare) · "Save Search to Favorites" button
Positioned after the three main form fields (Origin, Destination, Depart) and before the primary CTA. Confirmed 2026-07-02 (D44) — see the domain-control layer built on this content: Flight Finder Advanced Search.
Expanded content confirmed 2026-07-02 (D44): live capture of the expander-flight finder-advanced search
component_set (node 4361:5537, live file owEYzHf7FrHRvWC2u82UOl) resolves the field set flagged open above —
see the Usage row for the confirmed content and the domain-control spec (FlightFinderAdvancedSearch)
for full field-level detail. This Expander page documents the reusable primitive only; the confirmed field
content is domain-specific and lives one layer up.
ViewModel
New ViewModel needed. Add ExpanderViewModel extending ComponentViewModel.
Trigger is the outer wrapper's button: the entire .alpa-expander element is the interactive target — not just the trigger row. The trigger row has the visual border; the outer wrapper handles the click and aria state.
aria-expanded: must reflect IsExpanded state on the button element for screen reader accessibility.
Gap, not height animation: the 24px gap between trigger and content is structural — it exists only when content is shown, not as an always-on spacer. CSS display:none / display:block or @if in Razor is correct.
Caret rotation: rotate the caret 180° when expanded. A CSS transition (transition: transform 0.2s) creates a smooth animation.
Figma component name:expander-flight finder-advanced search — the name encodes the specific usage. The generic Expander spec here is the reusable primitive; the label and content are injected by the parent.
Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction).