Card Notification Figma: Advocacy section primitive tier

Updated: 2026-06-26

Audited: 2026-06-26

Text-only disclosure row with navy bottom border — used in Advocacy section for expandable/navigable content items

Figma screen: Advocacy 4877:11274 · file key: psH738AqHDxuMyFm897f9r · captured 2026-06-26

Primitive tier — text-only tappable row. The card-notification is a minimal disclosure row: a single line of Afacad SemiBold 18px body text + a trailing chevron, separated from the next row by a 1px navy (border/blue-dk #05273e) bottom border. No image, no icon, no badge. Used in Advocacy for items such as "DONATE & JOIN" CTAs' supporting text rows and disclosure links. Distinguished from card-sm (which has an image) and notification-flight-status (which has flight data).

Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r · Advocacy screen (4877:11274) · captured 2026-06-26

Live CSS Preview

Default rows (white bg, navy bottom border)

ALPA Political Action Committee › Federal Legislative Update › Grassroots Action Center › Lobbying & Government Affairs ›

Design Tokens

Dimensions

Horizontal padding

16 px

Vertical padding

16 px

Gap (text to chevron)

16 px

Chevron slot size

18×18 px

Bottom border width

1 px

Colors

Row background

white/500 #ffffff

Bottom border (navy)

border/blue-dk #05273e

Text color

text/primary #05273e

Chevron color

text/primary #05273e

Typography

Font family

Afacad SemiBold

Font weight

600

Font size

18 px (Body/M)

Color

text/primary #05273e

Line height

1.3

Layer Tree

└── .alpa-card-notification · FRAME · flex-row · gap-16px · px-16px py-16px · border-bottom:1px solid #05273e · white bg
├── .alpa-card-notification__text · TEXT · Afacad SemiBold 18px · #05273e · flex:1
└── .alpa-card-notification__chevron · ICON · 18×18px · chevron-right · #05273e

ViewModel

New ViewModel needed — not yet in ComponentViewModels.cs. Add CardNotificationViewModel extending ComponentViewModel.

└── CardNotificationViewModel : ComponentViewModel
├── Text : string — row label (e.g. "ALPA Political Action Committee")
└── Link : string? — navigation target; null disables tap interaction

Usage Context

Screen	Context	Notes
Advocacy (4877:11274)	Below "DONATE & JOIN" outline button	Vertical stack of disclosure rows for advocacy sub-topics; navy border visually separates items from the Advocacy section background

Developer Notes

Border token distinction: This component uses border/blue-dk (navy #05273e) — not the standard border/default (#d2d4d6) used on form-field rows. The navy border is intentional and creates a stronger visual division on the Advocacy screen's light background.
Not related to notification-flight-status: Despite the name proximity, this is a completely different component. notification-flight-status is a flight-data card with icon, route, date, and expand button. card-notification is a plain text row from the Advocacy section.
Name decision: "card-notification" aligns with the Figma node hierarchy (Advocacy screen places these under a card-like section container). If naming decisions record (naming-decisions-record.html) assigns a different canonical name, that takes precedence.
Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction).

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: CardNotification.razor. New ViewModel required: CardNotificationViewModel.

Parameter	Type	Required	Description
`Vm`	`CardNotificationViewModel`	Yes	Row text and navigation link.
`OnTap`	`EventCallback<CardNotificationViewModel>`	No	Fires when row tapped. Consumer navigates to `Vm.Link`.

Razor Usage (target)

@* Advocacy section — stack of disclosure rows *@
@foreach (var item in AdvocacyItems)
{
    <AlpaCardNotification Vm="@item"
                          OnTap="@NavigateToAdvocacyItem" />
}

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-card-notification BEM block.

Class	Scope	Key rules
`.alpa-card-notification`	Row root (a or div)	`display:flex; align-items:center; gap:16px; padding:16px; border-bottom:1px solid var(--border-blue-dk, #05273e); background:white; cursor:pointer`
`.alpa-card-notification__text`	Label text	`flex:1; font-family:var(--font-family/alt); font-weight:600; font-size:18px; color:var(--text-primary, #05273e); line-height:1.3`
`.alpa-card-notification__chevron`	Trailing chevron icon	`width:18px; height:18px; flex-shrink:0; color:var(--text-primary, #05273e)`