CardSmall Component Figma: card-sm

Updated: 2026-07-10 11:57 ET

Audited: 2026-07-09 21:15 ET

Structural Properties Specification

ViewModel: CardSmallViewModel : CardViewModel

Design tokens sourced from Figma file: ALPA mobile app (1).fig · Component: card-sm · node 4099:5230

Favorite heart — rendered and interactive as of 2026-07-08. The favorite / i-heart element (18×18, top-right) IS drawn on the tile (design decision D31, 2026-06-26). Wired in CardSmall.razor as ShowFavorite/IsFavorite/OnFavoriteToggle parameters (WI 2182) — the card stays presentational; the consuming page wires the callback to the live Favorites API and gates ShowFavorite on IAuthentication.IsLoggedIn and on the item having a stable id (an unfavoritable item renders no heart at all — never a dead control). States (verified against the Figma i-heart variant set 5192:15185, 2026-07-09): off = navy outline (icons/heart.svg), on = filled navy #05273E (icons/heart-selected.svg) — an earlier build filled it red; navy is the design-correct on-state. Superseded note: IsFavorite was previously expected to persist as local client state (Settings.FavoriteItemIdsJSON) before the Favorites API existed — the live API is now the source of truth.

Design Tokens (from Figma)

Dimensions

Width

361 px

Height

51 px

Image area width

80 px

Content padding

16 px

Favorite icon

18×18 px

Favorite padding

8 px (top/right)

Colors

Card background

#FFFFFF

Image fallback (light)

#DFEDF9

Image fallback (dark)

#05273E

Title text

#05273E

Typography

Title

Lora SemiBold 16px lh=1.2×

Token

display-heading/xs

Layer Structure

          [INSTANCE] card-sm 361×51

            [FRAME] img 80×51 #dfedf9 / #05273e

            [FRAME] content flex · p=16

              [FRAME] eyebrow

                [FRAME] body

                  [TEXT] title #05273e Lora SemiBold 16px

            [FRAME] favorite pr=8 px=8

              [INSTANCE] i-heart 18×18

Visual Preview

IMG

DART

IMG

ALPA Directories

Flight Pay Loss

Light tiles use the #dfedf9 image fallback; navigation-only tiles use the #05273e dark fallback. Each card maps directly to a MenuItem with ShowOnHomeScreen = true.

Structural Diagram

Figma Structural Specs

Dimensions & Layout

Property	Value
Width	361 px
Height	51 px
Image area	80 px wide × full height
Background Fill	`#ffffff`
Content padding	16 px

Layer Tree

[INSTANCE] card-sm  361×51  #ffffff

  [FRAME] img  80×51  #dfedf9 / #05273e

  [FRAME] content  flex · p=16

    [FRAME] eyebrow

      [FRAME] body

        [TEXT] title  #05273e  Lora SemiBold 16px

  [FRAME] favorite  pr=8 px=8

    [INSTANCE] i-heart  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).

Source: Figma file R6hPjBdjSIn6946qTJasUC — node 4099:5230 (main-feed slot) — Figma key(s): card-sm — extracted 2026-06-04