← Back to Index

Button Card Component Figma: card-button New · 2026-06-17 revision D14

Audited: 2026-06-26

Structural Properties Specification
ViewModel: ButtonCardViewModel : CardViewModel  ·  adds CallToAction : ButtonViewModel
Design tokens sourced from Figma: ALPAmobileWtablet_20260617 (2026-06-16)  ·  Component: card-button  ·  Node: 4104:5451 (live file; 5452:434 is the original dated-snapshot id, see D50)  ·  Scope: i-phone (phone only)
Decision D14 (adopted 2026-06-22): card-button is a distinct new scaffold component — a content card with an embedded CTA button. It is not a rename or variant of card-btn (the navigation tile absorbed by Button in D3). The two are structurally different: card-btn is a compact icon-tile navigation button (116×106 px); card-button is a full-width content card with multi-line body text and an embedded action button. Four feature areas each get their own domain control factory that composes this scaffold.

Design Tokens (from Figma)

Sizing confirmed (DQ-5 resolved 2026-06-22): Live Figma metadata (node 4104:5451) confirms two variants — Default 353×189 px, Variant2 353×129 px. Content width is 353 px within a 393 px viewport.

Dimensions

Width
353 px content (393 px viewport)
Height — Default
189 px
Height — Variant2
129 px
Content padding
16 px
Border radius
BorderRadius/L — 12 px (D38)
CTA button height
TBD — D50 (2026-07-13): live example content ("Accident Hotline") shows no visible CTA element in either variant; may be placeholder content or a conditional element

Colors

Card background
#FFFFFF
Card border
#E3E3E3 · Border/Subtle
Header text & CTA primary fill
#05273E · Color/Navy
Body text
#5D6471 · Text/Secondary
CTA secondary (Variant2)
#007BC2 · Color/Blue

Typography

Header font
Lora SemiBold · Font Family/Heading · size TBD
Body font
Futura PT Book · 14 px
CTA label
700 weight · 13 px (TBD)

MEC Theming (overridable)

Surface/Brand
MEC primary surface tint
Accents/Blue
Interactive accent — CTA color
Text/On-Brand
Text on branded surfaces
Border/Brand
Accent border (Variant2 outline)

Variants

Two Figma variants defined on node 4104:5451 (Property 1: Default / Variant2; original dated-snapshot id 5452:434). Default uses a filled primary CTA button; Variant2 uses an outlined secondary CTA style.

Discrepancy noted 2026-07-13 (D50): a live get_screenshot of node 4104:5451 shows the two variants differing by icon position (top-centered vs. left-horizontal), not by CTA button style — neither variant's example content ("Accident Hotline") shows a distinct filled/outlined CTA button element. The primary/secondary CTA description above may describe other instances (Jump Seat, Committees, PAC, My MEC) not independently re-verified in this pass. Treat the CTA-button-style claim as unconfirmed for this specific node until design re-checks it.
Default · Primary CTA
My MEC
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
View MEC Details
Variant2 · Secondary CTA
Jump Seat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Bid for Jump Seat
VariantFigma propertyCTA styleExample instance
DefaultProperty 1 = DefaultFilled, high contrast (navy / MEC brand)My MEC, Committees, PAC/Take Action
Variant2Property 1 = Variant2Outlined / tinted (blue / MEC accent)Jump Seat, secondary actions

ViewModel Structure

CardViewModel (abstract base — inherits SurfaceViewModel → ComponentViewModel)
└── ButtonCardViewModel : CardViewModel
    ├── Header : string — card header / section title (inherited from CardViewModel)
    ├── ContentText : string — body description text (inherited from CardViewModel)
    └── CallToAction : ButtonViewModel — the embedded CTA button (new property)
        ├── Label : string — button label text
        ├── Command : ICommand — navigation or feature action
        └── Style : ButtonStyle — Primary (Default) / Secondary (Variant2)
Composition, not inheritance: CallToAction : ButtonViewModel is a nested scaffold object — ButtonCardViewModel holds a ButtonViewModel as a property; it does not multiply-inherit from ButtonViewModel. Domain controls set all three fields (Header, ContentText, CallToAction) via their factory, keeping the scaffold domain-free.

Known Instances — Domain Controls (pending spec)

Four feature areas use this scaffold. Each will have its own RawRepresentationFactory<ButtonCardViewModel>. Domain control specs are pending.

Domain controlScreen / sectionFigma headerCTA variantStatus
MEC CTA Card MEC screen 4684:7914 My MEC Default Pending spec
Jump Seat CTA Card Jump Seat / JSFF screen Jump Seat Variant2 Pending spec
Committees CTA Card Committees screen Committees TBD Pending spec
PAC Action Card PAC / Take Action screen PAC / Take Action TBD Pending spec

Figma Layer Tree

From binary canvas scan of ALPAmobileWtablet_20260617 (2026-06-16). Property 1 = Default shown; Variant2 mirrors with secondary CTA styling.

card-button / Property 1=Default  (node 5452:434)
├── [header area]  — Header text · Typography TBD
├── [content area]  — Body/ContentText · Futura PT Book 14 px
└── [button / CallToAction]  — ButtonViewModel child (filled or outlined per variant)
    └── [label]  — CTA label string

Exact layer names TBD — binary string extraction confirmed structural pattern; full Figma API read needed for precise layer names.

Implementation Notes