One component, two presentations. The optional Icon (ImageSource?) property drives the variant: absent → text-only button; present → leading-icon button. This absorbs the former Icon Tile component — an icon is data, not a separate type (mirrors MenuItemViewModel, where the icon is an optional Glyph/ImageSource). Per naming decision D3.
Design tokens sourced from Figma file: ALPA mobile app (1).fig · Component: card-btn / button-sm
Design Tokens (from Figma)
Dimensions
card-btn width
116 px
card-btn height
106 px
button-sm width
151 px
button-sm height
36 px
button-sm corner radius
4 px
Icon instance
24×24 px
Favorite icon
18×18 px
Colors
Card background
#FFFFFF
Title text
#05273E
Button fill
#007BC2
Button label text
#FFFFFF
Typography
Title
Lora SemiBold 20px lh=1.2×
Button label
Futura LT Pro Bold 12px
Layer Structure
[SYMBOL] card-btn 116×106
[FRAME] body 100×72
[TEXT] title #05273e Lora SemiBold 20px
[INSTANCE] icon 24×24
[INSTANCE] i-heart 18×18
[SYMBOL] button-sm #007bc2 151×36 r=4
[TEXT] label #ffffff Futura LT Pro Bold 12px
Figma Structural Specs
Dimensions & Layout
Property
Value
Width
116 px
Height
106 px
Background Fill
#ffffff
Stroke Weight
1px
Layer Tree
Layer Name
Type
Size (pt)
Fill
Notes
body
FRAME
100×72
—
United Airlines
TEXT
100×44
#05273e
Lora SemiBold 20px
united/committee
INSTANCE
24×24
—
i-heart
INSTANCE
18×18
—
Feed contract field:ItemDto.IsSortable (bool, default true) — when false, the comms team has locked this item's position in its container; the device user cannot reorder it (D36).