← Back to Index
Promo Banner
Figma: banner
domain control
provisional
Updated: 2026-07-02 13:37 ET
Audited: 2026-07-02 13:37 ET
Dismissible promotional / announcement banner — navy strip with a title, subtitle, optional image, and a close (X) control.
Figma: Components section, node
5512:12925 · live file
owEYzHf7FrHRvWC2u82UOl ("ALPA mobile app") · captured 2026-07-02 · decision
D43
New component, 2026-07-02 Flight Finder scoped sync. Not present in the 2026-06-17 or 2026-06-23
sweeps — first found during a Flight Finder area audit of the live Figma file. Provisional
domain-control
tier: the title/subtitle/image are dynamic content, not a fixed generic shape, so it is documented as a standalone
domain control (per
D40) rather than a scaffold primitive.
Domain source not confirmed (D43). Sample content is a union survey promo ("Survey Now Open" /
"Closes June 10 at 11:59PM PT" / UPA27 logo image) — no confirmed backend source exists for this content today.
Candidates: a new
ItemDto type on the Dynamic Feed system (
D28
discriminator-set pattern), or a dedicated announcements/surveys service. It is also possible this is one-off static
promotional content, which per
D40 would be
exempt from
the component library rather than a catalogued domain control. Needs design/product confirmation before implementation.
Live CSS Preview
Property 1 = Default — close left, image + text right
Property 1 = Variant2 — image + text left, close right
States
| State | Figma name | Dimensions | Layout |
|---|
| Default | Property 1=Default | 319.4 × 56 | Close (X) first, then image, then title/subtitle text |
| Variant2 | Property 1=Variant2 | 309.4 × 56 | Image and text first, close (X) last |
Both states carry identical content — the difference is element order/layout only, not a content or size distinction. Not confirmed whether the two states represent a platform difference (e.g. RTL) or a design iteration; not resolved this pass.
Design Tokens
Container
Layout
flex-row · align-stretch
Width
~346 px (component_set overall 346.4×172, includes both stacked states)
Title text
Font family
Futura PT (bold weight)
Subtitle text
Font family
Futura (medium weight)
Layer Tree
└── banner · COMPONENT_SET · 2 states (Default / Variant2)
├── close (X) · BOOLEAN_OPERATION · 14×14 · fill #ffffff
├── image · RECTANGLE · 82×47 (promo/logo image)
└── text block · FRAME
├── title · TEXT · Futura PT Bold 18px · white (e.g. "Survey Now Open")
└── subtitle · TEXT · Futura Medium 12px · white (e.g. "Closes June 10 at 11:59PM PT")
ViewModel
New standalone domain-control ViewModel (per D40 — composes shared atoms + tokens, not a scaffold base class). Spec-only; not yet in ComponentViewModels.cs.
└── PromoBannerViewModel (spec-only, standalone)
├── Title : string — e.g. "Survey Now Open"
├── Subtitle : string? — e.g. "Closes June 10 at 11:59PM PT"
├── ImageUrl : string? — optional promo/logo image
├── IsDismissed : bool — client-side dismiss state
└── DismissCommand : ICommand
Developer Notes
- Domain source is the open item: do not start implementation before confirming the domain source with design/product — see the warning above.
- Dismiss is meaningful: per the project's interactive-control rule, the close (X) requires a backing C# state (
IsDismissed) and an @onclick handler — not decorative.
- Two layout states, same content: render both
Default and Variant2 from the same ViewModel shape; the difference is purely CSS ordering (flex-direction / element order), not separate bound fields.
- Implementation gated: no Razor/C# work until Epic AB#2087 (Presentation Extraction).