Card.Verification
A compact surface card for identity verification prompts. It pairs an expiry badge, a description body, a masked verification method slot (phone, email, or passkey), and a trailing chevron icon into a horizontally composed container.
Overview
A compact surface card for identity verification prompts. It pairs an expiry badge, a description body, a masked verification method slot (phone, email, or passkey), and a trailing chevron icon into a horizontally composed container.
Anatomy
- 1Container required
- 2Container.Content required
- 3Badge Accent-tinted badge showing the expiry label (e.g. Expires on + timestamp). Uses label/md/medium typography and color.content.accent fill.
- 4Container.Content required
- 5Label.Description Body text describing the verification action. body/sm/regular, color.content.primary.
- 6Container.Method Slot for the masked verification method (phone, email, or passkey row). body/md/semibold, color.content.primary.
- 7IconTrailing Trailing chevron icon. label/md/semibold, color.content.tertiary.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.