Accordion
A disclosure row that expands to reveal content. Supports optional leading icon and description via boolean visibility properties. Reduced from 24 to 6 variants (Type × State) with color tokens fully connected.
Action List - with Counter
Action-list row with a 32px leading icon, label, trailing chevron, and a trailing Counter pill.
Action List - with Description
Action-list row with a primary label and a secondary description line beneath it.
Action Row
A tappable list row with a leading asset slot, label and description, and a trailing chevron with optional counter. Merges the former Action List, Action List with Counter and Action List with Description.
Ad Carousel
A titled rail that scrolls Ad Space cards sideways, with an optional button in the header. One version, driven by a content slot.
Ad Space
A container for ads, promos, and sponsored placements. Three versions — Receipt, Banner, and Promo — each built around one swappable asset area.
Alert
A persistent status surface with intent, title, description, and an optional action — in Card or Banner style. 90 variants across <code>Type</code> (Neutral / Information / Warning / Error / Success) × <code>Style</code> (Card / Banner) × <code>Content</code> (Default / Header Only / Description Only) × <code>Size</code> (3 steps, <code>Large</code> down to <code>Small</code>), with a <code>Leading-Slot</code> icon slot and a <code>Trailing-Slot</code>.
Amount Text Field
A display-style numeric input for PHP amount entry in Send Money, Cash-In, and top-up flows. Sits on a single underline, with a label above and supporting text below. Two sizes × four interaction states.
Avatar
A circular display element showing user initials or a profile image. Supports 7 sizes (20px-90px) and 3 types (dark initials, light initials, image). Used when a profile image is unavailable or for visual user identification.
Avatar Group
Stacked or overlapping avatars used to show participant lists — conversation members, shared documents, collaboration indicators.
Badge
A small label used to flag status, counts, or category — supports multiple intents and densities.
Banner
A neutral-background promotional banner with an image or icon, a text stack (preamble, heading, description), and an optional button link.
Bottom Sheet
The bottom-anchored sheet surface — a drag handle, a slotted header, an optional subtitle, and content and footer slots a consumer fills.
Brand App Bar
A wordmark-only app bar in brand and default surfaces, used where a screen needs identity rather than navigation.
Button
Used to trigger an action when tapped. The button's Call to Action describes the action that will occur. The Large/Medium Buttons are the default size for the GCash app.
Callout
A compact attention strip with neutral, info, warning, or danger intent, optional description, and an optional leading icon.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — banner, title, description, and an optional price. Comes in three versions: Default, With Icon, and Discount.
Carousel Item
A full-bleed banner item for a horizontal carousel — background image, heading, description, and a button. 24 versions across size, appearance, top element, and pressed state.
Chat Composer
A message composer that arranges a leading action slot, a composed Input Field and a trailing send slot into one row.
Checkbox
A selection control for binary and partial choices. 33 variants across isSelected (true/false/indeterminate) × State (Default/Pressed/Focused/Disabled/Error) × Size (Small/Medium/Large).
Chip
A pill-shaped selector carrying a label and an optional chosen value, with optional leading and trailing icons and a slot for an attached dropdown.
Countdown
A live timer showing how long is left. Three layouts — boxed units, a single bar, or a compact pill — each with a running, nearly-over and finished state.
Countdown - Promo
A promotional card built around a countdown — a line of copy, the timer, a full-width action and a dismiss control. Two levels of emphasis.
Countdown - Unit
One slice of a countdown — a number and the unit it counts. Stacked for the boxed and bar layouts, inline for the pill.
Counter
A small numeric badge used to display unread or pending counts on icons and rows.
Date Picker
The date field a user actually taps. Eight versions across four states and a filled flag, built on the system's own Dropdown rather than a redrawn field.
Date Picker - Calendar
The calendar surface itself. Three modes — a day grid, a month list and a year list — assembled entirely from Date Picker - Cell and Date Picker - Header instances.
Date Picker - Cell
The one selectable cell used everywhere in the picker — day numbers in the calendar grid, and month and year labels in the header views. 16 versions.
Date Picker - Group
The calendar surface that hosts the Day/Month/Year picker grids.
Date Picker - Header
The weekday label above each column of the calendar grid. One component, no versions — it only ever displays text.
Date Picker - Header Trigger
The month and year chips in the calendar header. Tapping one switches the calendar to its month or year view. Six versions — three states, with or without a caret.
Date Picker - Item
The 32×32 selectable day cell rendered inside the Date Picker calendar grid.
Detail Hero
A card hero introducing a transaction or recipient — avatar, title, separator, label-value row and description, on a brand or default surface.
Empty State
A centred no-content surface — visual, header (title + description), and an action. 4 variants across <code>Style</code> (Default/Subtle) × <code>VisualType</code> (Icon/Asset), with a <code>Visual Container</code>, <code>Action Container</code> slot, and a token-bound header.
Footer
A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Generic Card
A tappable content card — slotted leading icon, a heading with tag and badge, two label-and-description rows, and a slotted trailing chevron.
Generic Transaction Card
A transaction-summary card with merchant info, amount, date, and tappable detail surface.
Horizontal Voucher
A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Inline Message
A full-frame status surface — illustration, title, description, and an optional body — for confirm / processing / error / neutral outcomes. 4 variants across a single <code>Type</code> axis (Success / Loading / Error / Neutral), with an <code>Illustration Container</code> and a <code>Body Container</code> slot.
Inline Text
A label-and-value row with an optional trailing element, description line and text link — used for inline detail pairs within lists and cards.
Input Field
A standard form text-input field — label, body, and four interaction states (default, active, error, disabled).
Labeled Field
A form field with a label-on-top layout, used for plain text and value inputs.
List
A frame containing 8 hardcoded List Item instances stacked with an 8px gap. No component properties, no variants. Functions as a layout example on the sticker sheet rather than a reusable component.
List Item
One row in a list — a leading marker, a filling label, and an optional trailing slot. Three nesting levels set the indent.
List Item - Asset
The leading marker in a list item — a status icon, a bullet, a square, a number, or a slot for anything else.
Menu Grid
A 2D grid of Service Item tiles used for top-level service navigation. <code>Column</code> (2–5) sets the tiles across, <code>Row</code> (1–5) the tiles down.
Modal
The general-purpose dialog — an optional illustration, a centred title and description, and one or two actions.
Modal - Transaction Receipt
The receipt dialog — a title, a block of transaction rows, a copyable reference number, and one or two actions.
Modal - Transaction Receipt Entry
One label-and-value row inside a transaction receipt. Two layouts: stacked when the value runs long, inline when it is short.
Month and Year Picker - Item
The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.
Page Banner
A header variant with the title centered, optional leading and trailing actions on either side.
Progress Bar
A linear progress indicator in 10% steps, from 0 to 100. Its track and fill colours come from colour variables.
Radio Button
A circular radio control for single-select groups. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code>.
Radio Button with Label
A form row pairing a Radio Button with a text label. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code> — mirroring the Radio Button atom exactly.
Recipient Field
A form field showing a selected recipient — avatar, name, and contact identifier.
Search Field
A search input field with a leading magnifying-glass icon and an optional clear button.
Section Header
A section-level heading row with preamble, title, counter, description, and optional leading and trailing media.
Segmented Control - Group
A labeled Segmented Control with a slot below for helper text, avatars or other content.
Segmented Control Button
A single tappable segment inside a Segmented Control. 6 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Active</code> (true / false). Active segments fill brand-blue; inactive segments carry a brand-blue outline. (Assessed in the 2026 Working File.)
Select
A trigger field that opens a menu of options — composes Select Field for the trigger and Select Group for the menu.
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
Select Group
The menu surface a Select opens — a rounded card wrapping a slot of Select Items, with optional dividers between them.
Select Item
One selectable row inside a Select Group — a leading element, a label with optional supporting text, and an optional trailing badge.
Service Item
A service tile — asset slot, label and optional description — used in the home Menu Grid and customizable shortcut surfaces, with an optional New badge and Add or Remove edit overlays.
Slider
A horizontal slider — a filled track, a knob, and an optional percentage tooltip that rides above it.
Stepper
A progress indicator for multi-step flows, in bullet, circular and dash forms. Merges the former Stepper - Bullet, Stepper - Circular and Stepper - Dash.
Stepper - Circular
A row of numbered circles whose ring arcs indicate progress through a multi-step flow.
Stepper - Dash
A flat segmented progress indicator — a row of rounded dashes where filled dashes mark current and earlier steps.
Subtext Message
A small caption rendered beneath form fields for helper text or validation messages. 8 variants across <code>Status</code> (Default / Success / Error / Disabled) × <code>Size</code> (Small / Default), each with a leading status icon and a <code>#message</code> plus trailing <code>#label</code>. (Assessed in the 2026 Working File.)
Tab Item
A single tab inside Tabs — label, swappable Icon slot, optional Counter and red dot. 24 variants across <code>State</code> (Default/Hover/Disabled) × <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Placement</code> (Leading/Trailing) × <code>isSelected</code>.
Table Row
A display-only table row — a leading label and however many data cells you drop into its Columns Slot. Comes in Header and Content roles, each with a disabled state.
Table Scheduling
A display-only scheduled-payment row — a date and total on the first line, then however many label/amount cells you drop into its slot. Default and disabled states.
Table Transaction
A display-only transaction row — a header of column labels, or a content row with a full-width label above however many peso-amount cells you drop into its slot.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> instances. 12 variants across <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Tabs Count</code> (2/3/4).
Terms & Conditions Accordion
A specialized accordion used inside voucher details to disclose terms and conditions.
Text Area
A multi-line text input for longer-form entry — label, body, and character counter.
Title Bar - App
The top-of-screen app bar, with status bar, title row, optional leading and trailing icons, and an optional expanded title block over an image background.
Toast
A transient bottom-anchored message for confirmations and inline alerts, with optional leading icon, description and trailing action. Auto-dismisses after a short delay.
Toast - With Button
A toast variant with a trailing action button used for undo or in-flight confirmations.
Toggle
A binary switch. 18 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false). Vector track + thumb, all colors token-bound.
Toggle - Segmented Control
A segmented control of 2, 3 or 4 segments, where the selected segment is filled brand-blue and the others carry a brand-blue outline.
Toggle - With Label
A toggle paired with a label and an optional subtext message, in a single row. 18 variants mirroring the Toggle atom — <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false) — nesting the Toggle instance plus a <code>#label</code> and a composed <code>Subtext Message</code>.
Tooltip
A pointered callout for walkthroughs and contextual hints. Carries a header, a description, and three slots — <code>⤷ AssetSlot</code>, <code>⤷ CloseSlot</code>, <code>⤷ ActionSlot</code>.
Tooltip - Onboarding
Named <code>Onboarding - Tooltip</code> in Figma. A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control. Superseded by <a href="/components/tooltip">Tooltip</a>.
Tooltip Blurred and Transparent
A dark, translucent directional tooltip with a backdrop blur, for use over photographic or high-contrast content.
Tooltip V2
A small floating callout anchored to a target with a directional pointer; ships in eight pointer positions.
Upload File
A file-upload field with a tappable upload affordance, file-name display, and progress/error states.
Vertical Voucher
A 162-wide vertical voucher tile combining a Voucher Asset image with title, description, price, validity, and status badges.
View Only Field
A read-only form field showing a label and value; non-interactive.
Visual Popup
An illustrated centered popup used for promos, success moments, and notable announcements.
Voucher
The voucher card, in the two shapes the app uses — a portrait tile for grids and a landscape row for lists — across the three states a voucher can be in.
Voucher Asset
A ticket-shaped image clipped into a notched frame, used as the visual on voucher placements.
Voucher Card Horizontal
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).
Voucher Details
The expanded voucher card — merchant, offer, price and validity above a notched divider, with the description and terms below. Two ways of presenting the terms.
Actions
Action List - with Counter
Action-list row with a 32px leading icon, label, trailing chevron, and a trailing Counter pill.
Action List - with Description
Action-list row with a primary label and a secondary description line beneath it.
Action Row
A tappable list row with a leading asset slot, label and description, and a trailing chevron with optional counter. Merges the former Action List, Action List with Counter and Action List with Description.
Button
Used to trigger an action when tapped. The button's Call to Action describes the action that will occur. The Large/Medium Buttons are the default size for the GCash app.
Chip
A pill-shaped selector carrying a label and an optional chosen value, with optional leading and trailing icons and a slot for an attached dropdown.
Inputs & Forms
Amount Text Field
A display-style numeric input for PHP amount entry in Send Money, Cash-In, and top-up flows. Sits on a single underline, with a label above and supporting text below. Two sizes × four interaction states.
Chat Composer
A message composer that arranges a leading action slot, a composed Input Field and a trailing send slot into one row.
Checkbox
A selection control for binary and partial choices. 33 variants across isSelected (true/false/indeterminate) × State (Default/Pressed/Focused/Disabled/Error) × Size (Small/Medium/Large).
Date Picker
The date field a user actually taps. Eight versions across four states and a filled flag, built on the system's own Dropdown rather than a redrawn field.
Date Picker - Calendar
The calendar surface itself. Three modes — a day grid, a month list and a year list — assembled entirely from Date Picker - Cell and Date Picker - Header instances.
Date Picker - Cell
The one selectable cell used everywhere in the picker — day numbers in the calendar grid, and month and year labels in the header views. 16 versions.
Date Picker - Group
The calendar surface that hosts the Day/Month/Year picker grids.
Date Picker - Header
The weekday label above each column of the calendar grid. One component, no versions — it only ever displays text.
Date Picker - Header Trigger
The month and year chips in the calendar header. Tapping one switches the calendar to its month or year view. Six versions — three states, with or without a caret.
Date Picker - Item
The 32×32 selectable day cell rendered inside the Date Picker calendar grid.
Input Field
A standard form text-input field — label, body, and four interaction states (default, active, error, disabled).
Labeled Field
A form field with a label-on-top layout, used for plain text and value inputs.
Month and Year Picker - Item
The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.
Radio Button
A circular radio control for single-select groups. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code>.
Radio Button with Label
A form row pairing a Radio Button with a text label. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code> — mirroring the Radio Button atom exactly.
Recipient Field
A form field showing a selected recipient — avatar, name, and contact identifier.
Search Field
A search input field with a leading magnifying-glass icon and an optional clear button.
Segmented Control - Group
A labeled Segmented Control with a slot below for helper text, avatars or other content.
Segmented Control Button
A single tappable segment inside a Segmented Control. 6 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Active</code> (true / false). Active segments fill brand-blue; inactive segments carry a brand-blue outline. (Assessed in the 2026 Working File.)
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
Text Area
A multi-line text input for longer-form entry — label, body, and character counter.
Toggle
A binary switch. 18 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false). Vector track + thumb, all colors token-bound.
Toggle - Segmented Control
A segmented control of 2, 3 or 4 segments, where the selected segment is filled brand-blue and the others carry a brand-blue outline.
Toggle - With Label
A toggle paired with a label and an optional subtext message, in a single row. 18 variants mirroring the Toggle atom — <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false) — nesting the Toggle instance plus a <code>#label</code> and a composed <code>Subtext Message</code>.
Upload File
A file-upload field with a tappable upload affordance, file-name display, and progress/error states.
View Only Field
A read-only form field showing a label and value; non-interactive.
Feedback & Status
Alert
A persistent status surface with intent, title, description, and an optional action — in Card or Banner style. 90 variants across <code>Type</code> (Neutral / Information / Warning / Error / Success) × <code>Style</code> (Card / Banner) × <code>Content</code> (Default / Header Only / Description Only) × <code>Size</code> (3 steps, <code>Large</code> down to <code>Small</code>), with a <code>Leading-Slot</code> icon slot and a <code>Trailing-Slot</code>.
Badge
A small label used to flag status, counts, or category — supports multiple intents and densities.
Callout
A compact attention strip with neutral, info, warning, or danger intent, optional description, and an optional leading icon.
Counter
A small numeric badge used to display unread or pending counts on icons and rows.
Empty State
A centred no-content surface — visual, header (title + description), and an action. 4 variants across <code>Style</code> (Default/Subtle) × <code>VisualType</code> (Icon/Asset), with a <code>Visual Container</code>, <code>Action Container</code> slot, and a token-bound header.
Inline Message
A full-frame status surface — illustration, title, description, and an optional body — for confirm / processing / error / neutral outcomes. 4 variants across a single <code>Type</code> axis (Success / Loading / Error / Neutral), with an <code>Illustration Container</code> and a <code>Body Container</code> slot.
Inline Text
A label-and-value row with an optional trailing element, description line and text link — used for inline detail pairs within lists and cards.
Progress Bar
A linear progress indicator in 10% steps, from 0 to 100. Its track and fill colours come from colour variables.
Subtext Message
A small caption rendered beneath form fields for helper text or validation messages. 8 variants across <code>Status</code> (Default / Success / Error / Disabled) × <code>Size</code> (Small / Default), each with a leading status icon and a <code>#message</code> plus trailing <code>#label</code>. (Assessed in the 2026 Working File.)
Toast
A transient bottom-anchored message for confirmations and inline alerts, with optional leading icon, description and trailing action. Auto-dismisses after a short delay.
Toast - With Button
A toast variant with a trailing action button used for undo or in-flight confirmations.
Containers & Surfaces
Accordion
A disclosure row that expands to reveal content. Supports optional leading icon and description via boolean visibility properties. Reduced from 24 to 6 variants (Type × State) with color tokens fully connected.
Bottom Sheet
The bottom-anchored sheet surface — a drag handle, a slotted header, an optional subtitle, and content and footer slots a consumer fills.
Generic Card
A tappable content card — slotted leading icon, a heading with tag and badge, two label-and-description rows, and a slotted trailing chevron.
Generic Transaction Card
A transaction-summary card with merchant info, amount, date, and tappable detail surface.
Modal
The general-purpose dialog — an optional illustration, a centred title and description, and one or two actions.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.
Tooltip
A pointered callout for walkthroughs and contextual hints. Carries a header, a description, and three slots — <code>⤷ AssetSlot</code>, <code>⤷ CloseSlot</code>, <code>⤷ ActionSlot</code>.
Tooltip - Onboarding
Named <code>Onboarding - Tooltip</code> in Figma. A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control. Superseded by <a href="/components/tooltip">Tooltip</a>.
Tooltip Blurred and Transparent
A dark, translucent directional tooltip with a backdrop blur, for use over photographic or high-contrast content.
Tooltip V2
A small floating callout anchored to a target with a directional pointer; ships in eight pointer positions.
Visual Popup
An illustrated centered popup used for promos, success moments, and notable announcements.
Navigation
Brand App Bar
A wordmark-only app bar in brand and default surfaces, used where a screen needs identity rather than navigation.
Detail Hero
A card hero introducing a transaction or recipient — avatar, title, separator, label-value row and description, on a brand or default surface.
Footer
A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Page Banner
A header variant with the title centered, optional leading and trailing actions on either side.
Section Header
A section-level heading row with preamble, title, counter, description, and optional leading and trailing media.
Stepper
A progress indicator for multi-step flows, in bullet, circular and dash forms. Merges the former Stepper - Bullet, Stepper - Circular and Stepper - Dash.
Stepper - Circular
A row of numbered circles whose ring arcs indicate progress through a multi-step flow.
Stepper - Dash
A flat segmented progress indicator — a row of rounded dashes where filled dashes mark current and earlier steps.
Tab Item
A single tab inside Tabs — label, swappable Icon slot, optional Counter and red dot. 24 variants across <code>State</code> (Default/Hover/Disabled) × <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Placement</code> (Leading/Trailing) × <code>isSelected</code>.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> instances. 12 variants across <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Tabs Count</code> (2/3/4).
Title Bar - App
The top-of-screen app bar, with status bar, title row, optional leading and trailing icons, and an optional expanded title block over an image background.
Data Display
Avatar
A circular display element showing user initials or a profile image. Supports 7 sizes (20px-90px) and 3 types (dark initials, light initials, image). Used when a profile image is unavailable or for visual user identification.
Avatar Group
Stacked or overlapping avatars used to show participant lists — conversation members, shared documents, collaboration indicators.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — banner, title, description, and an optional price. Comes in three versions: Default, With Icon, and Discount.
Carousel Item
A full-bleed banner item for a horizontal carousel — background image, heading, description, and a button. 24 versions across size, appearance, top element, and pressed state.
List
A frame containing 8 hardcoded List Item instances stacked with an 8px gap. No component properties, no variants. Functions as a layout example on the sticker sheet rather than a reusable component.
List Item
One row in a list — a leading marker, a filling label, and an optional trailing slot. Three nesting levels set the indent.
List Item - Asset
The leading marker in a list item — a status icon, a bullet, a square, a number, or a slot for anything else.
Menu Grid
A 2D grid of Service Item tiles used for top-level service navigation. <code>Column</code> (2–5) sets the tiles across, <code>Row</code> (1–5) the tiles down.
Table Row
A display-only table row — a leading label and however many data cells you drop into its Columns Slot. Comes in Header and Content roles, each with a disabled state.
Table Scheduling
A display-only scheduled-payment row — a date and total on the first line, then however many label/amount cells you drop into its slot. Default and disabled states.
Table Transaction
A display-only transaction row — a header of column labels, or a content row with a full-width label above however many peso-amount cells you drop into its slot.
Promotions
Ad Space
A container for ads, promos, and sponsored placements. Three versions — Receipt, Banner, and Promo — each built around one swappable asset area.
Horizontal Voucher
A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Terms & Conditions Accordion
A specialized accordion used inside voucher details to disclose terms and conditions.
Vertical Voucher
A 162-wide vertical voucher tile combining a Voucher Asset image with title, description, price, validity, and status badges.
Voucher
The voucher card, in the two shapes the app uses — a portrait tile for grids and a landscape row for lists — across the three states a voucher can be in.
Voucher Asset
A ticket-shaped image clipped into a notched frame, used as the visual on voucher placements.
Voucher Card Horizontal
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).
Voucher Details
The expanded voucher card — merchant, offer, price and validity above a notched divider, with the description and terms below. Two ways of presenting the terms.
Other
Ad Carousel
A titled rail that scrolls Ad Space cards sideways, with an optional button in the header. One version, driven by a content slot.
Banner
A neutral-background promotional banner with an image or icon, a text stack (preamble, heading, description), and an optional button link.
Countdown
A live timer showing how long is left. Three layouts — boxed units, a single bar, or a compact pill — each with a running, nearly-over and finished state.
Countdown - Promo
A promotional card built around a countdown — a line of copy, the timer, a full-width action and a dismiss control. Two levels of emphasis.
Countdown - Unit
One slice of a countdown — a number and the unit it counts. Stacked for the boxed and bar layouts, inline for the pill.
Modal - Transaction Receipt
The receipt dialog — a title, a block of transaction rows, a copyable reference number, and one or two actions.
Modal - Transaction Receipt Entry
One label-and-value row inside a transaction receipt. Two layouts: stacked when the value runs long, inline when it is short.
Select
A trigger field that opens a menu of options — composes Select Field for the trigger and Select Group for the menu.
Select Group
The menu surface a Select opens — a rounded card wrapping a slot of Select Items, with optional dividers between them.
Select Item
One selectable row inside a Select Group — a leading element, a label with optional supporting text, and an optional trailing badge.
Service Item
A service tile — asset slot, label and optional description — used in the home Menu Grid and customizable shortcut surfaces, with an optional New badge and Add or Remove edit overlays.
Slider
A horizontal slider — a filled track, a knob, and an optional percentage tooltip that rides above it.