A 336×111 horizontal voucher card with text content on the left and a perforated image frame on the right; ships in four state variants (limited, expiring, used, expired).
Superseded by Voucher
Superseded by Voucher. This card, Horizontal Voucher, Vertical Voucher and Voucher Asset all described the same object. They are now settings on one component at node
5372:38309 — AssetSize, Orientation and State — where the frozen strings became text layers and the badges became slots. Kept as a record of the assessment that drove the consolidation.Live Preview
Properties
State
Badge
Original price
DS Health
Reusable
Fail
Title "Buy Load Globe Go90", price "PHP 50.00", original price "PHP 90.00", and validity string are all hardcoded inside the symbol. The partner logo is a raster GCash asset baked into the right frame. Any real voucher (a Globe load voucher, a GrabFood 50% off, a Shopee ₱100 off) cannot render without detaching.
Self-contained
Partial
Colors are token-bound (
main/vouchers/color/default/* and main/vouchers/color/expired/*). Typography uses named text styles (Primary/Multi-line Label/Base, Primary/Label/Small, Secondary/Bold/Small Caption). The card does carry its own layout and state treatment — but the logo raster, the "GET VOUCHER" CTA text, and the validity date are all frozen.Consistent
Warn
Correctly models
state as a variant axis — the other two voucher-card siblings (Vertical Voucher, Horizontal Voucher) do not. But the three components ship as three separate records with divergent property shapes. Family-level inconsistency.Composable
Warn
Nests a Badge instance (composition works). But the partner-image frame is a bespoke raster tree, not an instance-swap slot; and the content block has no text slots. A parent screen cannot compose real voucher data into this card.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| State | N/A | N/A | state enum (4) | Drives bg, label colors, partner-image treatment, and corner badge. Add a default fifth state for vouchers without a status callout. |
| Title | N/A | N/A | Hardcoded "Buy Load Globe Go90" | No property; must be set via detach. |
| Price / original | N/A | N/A | crossedValue boolean (strings hardcoded) | "PHP 50.00" and "PHP 90.00" frozen; boolean only toggles visibility of the strikethrough. |
| Validity | N/A | N/A | Hardcoded "Validity: Dec 25 2022 - Jan 5 2023" | No property; must be set via detach. |
| Status badge | N/A | N/A | badge boolean + state-derived text | "Limited" / "Expiring" / "Used" / "Expired" are derived from state. Consumers cannot set their own badge text. |
| Partner logo | N/A | N/A | Raster GCash asset | No slot — logo is baked into the partner-image frame. |
| CTA | N/A | N/A | "GET VOUCHER" rotated text (non-interactive) | Card is the tap target; the rotated text is decorative, not a Button instance. |
| Tap state | N/A | N/A | Not modelled | No pressed/focused/disabled on the card frame. |
Issues
- State axis is modelled correctly. Unlike Vertical Voucher and Horizontal Voucher, this component ships a proper
statevariant driving background, label colors, partner-image tint, and badge style. The 4-value enum (limited / expiring / used / expired) is the canonical shape to port to the unified Voucher Card. C5 · Interaction State Coverage - Voucher color tokens are bound. Background (
main/vouchers/color/default/bg,main/vouchers/color/expired/bg), title (default/label-title#0A2757,expired/label-title#445C85), amount (label-amount-horizontal#2340A9,expired/label-amount#6780A9), original amount (label-amount-original#90A8D0), and metadata (expired/label-metadata#6780A9) all resolve through the voucher component variable collection. C3 · Token Coverage - Badge instance is a DS component. The corner ribbon is a real Badge instance — styled via
main/badge/information/heavy/background,main/badge/negative/heavy/background, ormain/badge/muted/light/backgrounddepending on state. Composition works; only the label string is state-derived rather than user-settable. C4 · Native Mappability - Shadow uses the app elevation token.
app/shadow/shadow-low(0 0 4 0 #020e220f) is applied to the card frame. C3 · Token Coverage
1.0.1 — September 2026Patch
Documentation backfill · node 5119:1786
Resolved issues recorded. 4 resolved issues on the Overview tab had no changelog row: State axis is modelled correctly; Voucher color tokens are bound; Badge instance is a DS component; Shadow uses the app elevation token.
Docs1.0.0 — April 2026Major
Initial Assessment · node 5119:1786
Assessed with Restructure verdict. 4-state variant (limited / expiring / used / expired) is the canonical state axis for the voucher family — the only one of three parallel voucher cards that models state. Text content, partner logo, and perforated edge are hardcoded / raster. Open
Design DecisionProposed family-level merge. Collapse this, Vertical Voucher (
Design Decision5119:1635), and Horizontal Voucher (5121:4533) into a single Voucher Card with orientation + state axes. Port this component's state coverage to the unified schema. Target: 2 × 5 = 10 variants instead of 3 divergent components. Open