Responsive saved-card management blocks for account billing, checkout, and commerce payment surfaces
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-19-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-19-title" class="text-color-default text-xl font-semibold md:text-2xl">Card recovery needed</h2>
<p class="text-color-placeholder text-sm md:text-base">The card remains visible so support and account owners can identify it safely.</p>
</header>
<div class="border-color-danger bg-color-danger-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start gap-3">
<span class="bg-color-danger-default text-color-default-invert flex size-10 items-center justify-center rounded">
<i class="fa-solid fa-ban" aria-hidden="true"></i>
</span>
<div class="min-w-px">
<h3 class="text-color-danger text-base font-semibold">Visa **** 7712 is blocked</h3>
<p class="text-color-caption text-sm">We could not verify the latest authorization. Replace this card before the next renewal.</p>
</div>
</div>
<plus-divider></plus-divider>
<div class="grid gap-4 md:grid-cols-3">
<div>
<p class="text-color-caption text-sm">Cardholder</p>
<p class="text-color-default text-sm font-semibold">Jack Jones JR</p>
</div>
<div>
<p class="text-color-caption text-sm">Card number</p>
<p class="text-color-default text-sm font-semibold">5142 **** 7712</p>
</div>
<div>
<p class="text-color-caption text-sm">Last attempt</p>
<p class="text-color-default text-sm font-semibold">May 14, 2026</p>
</div>
</div>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex items-center gap-3">
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
<div>
<h3 class="text-color-default text-base font-semibold">Backup Mastercard **** 5540</h3>
<p class="text-color-caption text-sm">Available for immediate recovery.</p>
</div>
</div>
<plus-chip status="success" invert>Ready</plus-chip>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Use backup card</plus-button>
<plus-button kind="filled" status="danger" size="lg" class="w-full sm:w-auto">Replace blocked card</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-2 sm:p-6 md:p-8" aria-labelledby="saved-cards-20-title">
<article class="border-color-default bg-color-modal flex w-full max-w-xs min-w-0 flex-col gap-6 rounded border p-4 sm:max-w-5xl md:gap-8 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-20-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved cards and new card</h2>
<p class="text-color-placeholder text-sm md:text-base">A static accordion-style manager with one add-card panel open for preview.</p>
</header>
<div class="border-color-default min-w-0 overflow-hidden rounded border">
<div class="bg-color-surface flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
<button class="text-color-default flex min-w-px items-center gap-3 text-left text-base font-semibold" type="button" aria-expanded="false" aria-controls="saved-cards-20-existing">
<i class="fa-solid fa-chevron-right text-color-caption text-sm" aria-hidden="true"></i>
Existing cards
</button>
<plus-chip status="success" invert>2 saved</plus-chip>
</div>
<div id="saved-cards-20-existing" class="sr-only">Existing card list is collapsed in this static preview.</div>
<plus-divider></plus-divider>
<div class="bg-color-default-default flex min-w-0 flex-col gap-5 p-3 md:p-5">
<button class="text-color-default flex min-w-px items-center gap-3 text-left text-base font-semibold" type="button" aria-expanded="true" aria-controls="saved-cards-20-panel">
<i class="fa-solid fa-chevron-down text-color-caption text-sm" aria-hidden="true"></i>
Add new credit card
</button>
<form id="saved-cards-20-panel" class="grid min-w-0 gap-5">
<div class="grid min-w-0 gap-5 md:grid-cols-2">
<label class="text-color-default grid min-w-0 gap-2 text-sm font-medium" for="saved-cards-20-cardholder">
<span>Cardholder Name *</span>
<input id="saved-cards-20-cardholder" class="border-color-default bg-color-surface text-color-default min-h-12 w-full min-w-0 rounded border px-4 text-base outline-none" placeholder="Cardholder Name" autocomplete="cc-name" />
</label>
<label class="text-color-default grid min-w-0 gap-2 text-sm font-medium" for="saved-cards-20-card-number">
<span>Card Number *</span>
<input id="saved-cards-20-card-number" class="border-color-default bg-color-surface text-color-default min-h-12 w-full min-w-0 rounded border px-4 text-base outline-none" placeholder="Card Number" autocomplete="cc-number" inputmode="numeric" />
</label>
</div>
<div class="grid min-w-0 gap-5 md:grid-cols-2">
<label class="text-color-default grid min-w-0 gap-2 text-sm font-medium" for="saved-cards-20-expiration">
<span>Expiration Date *</span>
<input id="saved-cards-20-expiration" class="border-color-default bg-color-surface text-color-default min-h-12 w-full min-w-0 rounded border px-4 text-base outline-none" placeholder="Expiration Date" autocomplete="cc-exp" />
</label>
<label class="text-color-default grid min-w-0 gap-2 text-sm font-medium" for="saved-cards-20-cvv">
<span>CVV *</span>
<input id="saved-cards-20-cvv" class="border-color-default bg-color-surface text-color-default min-h-12 w-full min-w-0 rounded border px-4 text-base outline-none" placeholder="***" autocomplete="cc-csc" inputmode="numeric" maxlength="4" />
</label>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex items-start gap-3">
<i class="fa-solid fa-lock text-color-success mt-1" aria-hidden="true"></i>
<p class="text-color-caption text-sm">Your card details are stored securely and can be removed from this account at any time.</p>
</div>
<div class="flex flex-wrap items-center gap-2" aria-label="Accepted payment types">
<span class="border-color-default bg-color-surface text-color-info flex h-6 min-w-10 items-center justify-center rounded border px-2 text-xs font-semibold">VISA</span>
<span class="border-color-default bg-color-surface flex h-6 min-w-10 items-center justify-center rounded border px-2" aria-label="Mastercard">
<i class="fa-brands fa-cc-mastercard text-color-danger" aria-hidden="true"></i>
</span>
<span class="border-color-default bg-color-surface text-color-default flex h-6 min-w-10 items-center justify-center rounded border px-2 text-xs font-semibold">AMEX</span>
</div>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" type="button" class="w-full sm:w-auto">Cancel</plus-button>
<plus-button kind="filled" status="primary" size="lg" type="button" class="w-full sm:w-auto">Save Card</plus-button>
</div>
</form>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-8-title">
<article class="border-color-default bg-color-modal flex w-full max-w-6xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Billing settings</p>
<h2 id="saved-cards-8-title" class="text-color-default text-xl font-semibold md:text-2xl">Wallet overview</h2>
<p class="text-color-placeholder text-sm md:text-base">Review saved cards beside the next invoice they will cover.</p>
</header>
<div class="grid gap-6 lg:grid-cols-5">
<div class="flex flex-col gap-4 lg:col-span-3" role="radiogroup" aria-label="Wallet cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-8-card" value="visa" checked aria-label="Select wallet Visa ending 2563"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Visa **** 2563</h3>
<p class="text-color-caption text-sm">Default wallet card - Jack Jones JR</p>
</div>
</div>
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="Visa">
<i class="fa-brands fa-cc-visa text-color-info text-2xl" aria-hidden="true"></i>
</span>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-8-card" value="mastercard" aria-label="Select Mastercard ending 6402"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Mastercard **** 6402</h3>
<p class="text-color-caption text-sm">Backup card for invoice retries</p>
</div>
</div>
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="Mastercard">
<i class="fa-brands fa-cc-mastercard text-color-danger text-2xl" aria-hidden="true"></i>
</span>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-8-card" value="paypal" aria-label="Select PayPal wallet"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">PayPal wallet</h3>
<p class="text-color-caption text-sm">[email protected]</p>
</div>
</div>
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="PayPal">
<i class="fa-brands fa-paypal text-color-info text-xl" aria-hidden="true"></i>
</span>
</article>
</div>
<aside class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5 lg:col-span-2">
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-color-caption text-sm">Next invoice</p>
<h3 class="text-color-default text-2xl font-semibold">$248.00</h3>
</div>
<plus-chip status="info" invert>Due May 28</plus-chip>
</div>
<plus-divider></plus-divider>
<dl class="grid gap-3">
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Plan</dt>
<dd class="text-color-default text-sm font-medium">Growth annual</dd>
</div>
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Workspace seats</dt>
<dd class="text-color-default text-sm font-medium">14 users</dd>
</div>
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Payment card</dt>
<dd class="text-color-default text-sm font-medium">Visa **** 2563</dd>
</div>
</dl>
<plus-button kind="outlined" status="default" size="lg" class="w-full">Update default card</plus-button>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-13-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-13-title" class="text-color-default text-xl font-semibold md:text-2xl">Card limit controls</h2>
<p class="text-color-placeholder text-sm md:text-base">Static spend-limit states for saved cards used by teams and billing admins.</p>
</header>
<div class="grid gap-4">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-13-card" value="visa" checked aria-label="Select Visa with 72 percent limit usage"></plus-radio>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
<div>
<h3 class="text-color-default text-base font-semibold">Operations Visa **** 2044</h3>
<p class="text-color-caption text-sm">Owner: Operations - monthly limit $5,000</p>
</div>
</div>
<plus-button kind="outlined" status="default" size="sm">Update limit</plus-button>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">$3,600 used</span>
<span class="text-color-default text-sm font-medium">72%</span>
</div>
<div class="bg-color-default-default h-2 w-full overflow-hidden rounded-full">
<div class="bg-color-warning-default h-2 w-3/4 rounded-full"></div>
</div>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-13-card" value="mastercard" aria-label="Select Mastercard with 44 percent limit usage"></plus-radio>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
<div>
<h3 class="text-color-default text-base font-semibold">Marketing Mastercard **** 6410</h3>
<p class="text-color-caption text-sm">Owner: Growth - monthly limit $2,500</p>
</div>
</div>
<plus-button kind="outlined" status="default" size="sm">Update limit</plus-button>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">$1,100 used</span>
<span class="text-color-default text-sm font-medium">44%</span>
</div>
<div class="bg-color-default-default h-2 w-full overflow-hidden rounded-full">
<div class="bg-color-success-default h-2 w-1/2 rounded-full"></div>
</div>
</div>
</article>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Edit selected</plus-button>
<plus-button kind="outlined" status="danger" size="lg" class="w-full sm:w-auto">Remove card</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-11-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Security settings</p>
<h2 id="saved-cards-11-title" class="text-color-default text-xl font-semibold md:text-2xl">Card controls</h2>
<p class="text-color-placeholder text-sm md:text-base">Review stored cards and the static controls that protect account billing.</p>
</header>
<div class="grid gap-6 lg:grid-cols-5">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5 lg:col-span-3">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-11-card" value="verified-card" checked aria-label="Select verified Visa ending 7782"></plus-radio>
<div>
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Verified Visa **** 7782</h3>
<plus-chip status="success" invert>3D secure</plus-chip>
</div>
<p class="text-color-caption text-sm">Used for protected invoices and checkout approvals.</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<div class="grid gap-4 sm:grid-cols-2">
<div class="border-color-default bg-color-surface flex items-center justify-between gap-4 rounded border p-4">
<div>
<p class="text-color-default text-sm font-semibold">Notify on use</p>
<p class="text-color-caption text-xs">Send receipt alerts</p>
</div>
<plus-toggle checked aria-label="Notify on use enabled"></plus-toggle>
</div>
<div class="border-color-default bg-color-surface flex items-center justify-between gap-4 rounded border p-4">
<div>
<p class="text-color-default text-sm font-semibold">Require approval</p>
<p class="text-color-caption text-xs">For team purchases</p>
</div>
<plus-toggle aria-label="Require approval disabled"></plus-toggle>
</div>
</div>
</article>
<aside class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5 lg:col-span-2">
<div class="flex items-start gap-3">
<span class="bg-color-success-invert-default text-color-success flex size-10 items-center justify-center rounded">
<i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
</span>
<div>
<h3 class="text-color-default text-base font-semibold">Security status</h3>
<p class="text-color-caption text-sm">All active cards are verified and ready for account billing.</p>
</div>
</div>
<plus-divider></plus-divider>
<div class="flex flex-col gap-3">
<plus-button kind="outlined" status="default" size="lg">Edit controls</plus-button>
<plus-button kind="outlined" status="danger" size="lg">Remove card</plus-button>
</div>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-3-title">
<article class="border-color-default bg-color-modal flex w-full max-w-3xl flex-col gap-6 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-3-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved card stack</h2>
<p class="text-color-placeholder text-sm md:text-base">A compact account panel for selecting a card without leaving settings.</p>
</header>
<div class="flex w-full flex-col gap-3" role="radiogroup" aria-label="Compact saved cards">
<article class="border-color-primary bg-color-primary-invert-default flex items-center gap-3 rounded border p-4">
<plus-radio name="saved-cards-3-card" value="business-visa" checked aria-label="Select business Visa ending 8840"></plus-radio>
<span class="border-color-default bg-color-surface flex h-9 w-14 shrink-0 items-center justify-center rounded border" aria-label="Visa">
<i class="fa-brands fa-cc-visa text-color-info text-xl" aria-hidden="true"></i>
</span>
<div class="min-w-px flex-1">
<h3 class="text-color-default truncate text-base font-semibold">Business Visa</h3>
<p class="text-color-caption truncate text-sm">Murat Polat - 4182 **** 8840</p>
</div>
<plus-chip status="primary" invert>Selected</plus-chip>
</article>
<article class="border-color-default bg-color-surface flex items-center gap-3 rounded border p-4">
<plus-radio name="saved-cards-3-card" value="team-mastercard" aria-label="Select team Mastercard ending 5509"></plus-radio>
<span class="border-color-default bg-color-surface flex h-9 w-14 shrink-0 items-center justify-center rounded border" aria-label="Mastercard">
<i class="fa-brands fa-cc-mastercard text-color-danger text-xl" aria-hidden="true"></i>
</span>
<div class="min-w-px flex-1">
<h3 class="text-color-default truncate text-base font-semibold">Team Mastercard</h3>
<p class="text-color-caption truncate text-sm">Finance shared - 5110 **** 5509</p>
</div>
<button class="text-color-caption flex size-9 shrink-0 items-center justify-center rounded" type="button" aria-label="More actions for team Mastercard">
<i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
</button>
</article>
<article class="border-color-default bg-color-surface flex items-center gap-3 rounded border p-4">
<plus-radio name="saved-cards-3-card" value="paypal" aria-label="Select PayPal"></plus-radio>
<span class="border-color-default bg-color-surface flex h-9 w-14 shrink-0 items-center justify-center rounded border" aria-label="PayPal">
<i class="fa-brands fa-paypal text-color-info text-xl" aria-hidden="true"></i>
</span>
<div class="min-w-px flex-1">
<h3 class="text-color-default truncate text-base font-semibold">PayPal</h3>
<p class="text-color-caption truncate text-sm">[email protected]</p>
</div>
<button class="text-color-caption flex size-9 shrink-0 items-center justify-center rounded" type="button" aria-label="More actions for PayPal">
<i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
</button>
</article>
</div>
<div class="grid gap-3 sm:grid-cols-3">
<plus-button kind="outlined" status="default" size="lg">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add
</plus-button>
<plus-button kind="outlined" status="default" size="lg">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="lg">Remove</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-4-title">
<article class="border-color-default bg-color-modal flex w-full max-w-6xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<h2 id="saved-cards-4-title" class="text-color-default text-xl font-semibold md:text-2xl">Default billing card</h2>
<p class="text-color-placeholder text-sm md:text-base">This card is used for invoices, renewals, and failed-payment retries.</p>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full md:w-auto">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add Card
</plus-button>
</header>
<div class="grid gap-5 lg:grid-cols-3">
<article class="border-color-primary bg-color-primary-default text-color-default-invert flex min-h-56 flex-col justify-between rounded-lg border p-5 lg:col-span-2">
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-sm font-medium">Primary card</p>
<h3 class="mt-1 text-xl font-semibold md:text-2xl">Visa Business</h3>
</div>
<span class="bg-color-surface text-color-info flex h-9 w-14 items-center justify-center rounded" aria-label="Visa">
<i class="fa-brands fa-cc-visa text-2xl" aria-hidden="true"></i>
</span>
</div>
<div class="grid gap-4 sm:grid-cols-3">
<div>
<p class="text-xs">Cardholder</p>
<p class="text-base font-semibold">Jack Jones JR</p>
</div>
<div>
<p class="text-xs">Card number</p>
<p class="text-base font-semibold">5142 **** 2563</p>
</div>
<div>
<p class="text-xs">Expires</p>
<p class="text-base font-semibold">02/29</p>
</div>
</div>
</article>
<aside class="border-color-default bg-color-surface flex flex-col gap-5 rounded-lg border p-5">
<div class="flex flex-col gap-1">
<p class="text-color-caption text-sm font-medium">Billing address</p>
<address class="text-color-default text-sm not-italic">Plus UI Inc.<br />340 Market Street<br />San Francisco, CA 94105</address>
</div>
<plus-divider></plus-divider>
<div class="flex flex-col gap-3">
<plus-button kind="outlined" status="default" size="lg">Edit card</plus-button>
<plus-button kind="outlined" status="default" size="lg">Set backup</plus-button>
<plus-button kind="outlined" status="danger" size="lg">Remove</plus-button>
</div>
</aside>
</div>
<div class="grid gap-3 md:grid-cols-2" role="radiogroup" aria-label="Backup billing cards">
<article class="border-color-default bg-color-surface flex items-center gap-3 rounded border p-4">
<plus-radio name="saved-cards-4-backup" value="mastercard" aria-label="Select Mastercard backup ending 6610"></plus-radio>
<i class="fa-brands fa-cc-mastercard text-color-danger text-2xl" aria-hidden="true"></i>
<div class="min-w-px flex-1">
<h3 class="text-color-default text-sm font-semibold">Mastercard **** 6610</h3>
<p class="text-color-caption text-sm">Backup billing card</p>
</div>
</article>
<article class="border-color-default bg-color-surface flex items-center gap-3 rounded border p-4">
<plus-radio name="saved-cards-4-backup" value="amex" aria-label="Select Amex backup ending 1200"></plus-radio>
<span class="text-color-info text-xs font-semibold">AMEX</span>
<div class="min-w-px flex-1">
<h3 class="text-color-default text-sm font-semibold">Amex **** 1200</h3>
<p class="text-color-caption text-sm">Travel and events</p>
</div>
</article>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-7-title">
<article class="border-color-default bg-color-modal flex w-full max-w-3xl flex-col gap-8 rounded border p-8 text-center md:p-10">
<header class="flex flex-col items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-14 items-center justify-center rounded-full">
<i class="fa-regular fa-credit-card text-2xl" aria-hidden="true"></i>
</span>
<div class="flex flex-col gap-2">
<h2 id="saved-cards-7-title" class="text-color-default text-xl font-semibold md:text-2xl">No saved cards yet</h2>
<p class="text-color-placeholder mx-auto max-w-lg text-sm md:text-base">Add a credit or debit card to make future checkouts, subscriptions, and invoices faster.</p>
</div>
</header>
<div class="border-color-default bg-color-surface mx-auto flex w-full max-w-md flex-col gap-4 rounded border p-4 text-left">
<div class="flex items-center gap-3">
<span class="border-color-default bg-color-default-default flex size-10 items-center justify-center rounded border">
<i class="fa-solid fa-lock text-color-success" aria-hidden="true"></i>
</span>
<div class="min-w-px">
<h3 class="text-color-default text-base font-semibold">Secure card storage</h3>
<p class="text-color-caption text-sm">Stored cards stay encrypted and can be removed any time.</p>
</div>
</div>
<plus-divider></plus-divider>
<div class="flex items-center gap-3">
<span class="border-color-default bg-color-default-default flex size-10 items-center justify-center rounded border">
<i class="fa-solid fa-bolt text-color-warning" aria-hidden="true"></i>
</span>
<div class="min-w-px">
<h3 class="text-color-default text-base font-semibold">Faster checkout</h3>
<p class="text-color-caption text-sm">Use a saved card for renewals, invoices, and purchases.</p>
</div>
</div>
</div>
<plus-button kind="filled" status="primary" size="lg" class="w-full sm:mx-auto sm:w-auto">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add New Credit Card
</plus-button>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-18-title">
<article class="border-color-default bg-color-modal flex w-full max-w-6xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Procurement</p>
<h2 id="saved-cards-18-title" class="text-color-default text-xl font-semibold md:text-2xl">Department cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Static procurement card states for departmental purchases and approvals.</p>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full md:w-auto">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add department card
</plus-button>
</header>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3" role="radiogroup" aria-label="Enterprise procurement cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-18-card" value="engineering" checked aria-label="Select engineering procurement card"></plus-radio>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">Engineering Visa</h3>
<p class="text-color-caption text-sm">5142 **** 3208 - Sofia Bennett</p>
</div>
<div class="flex flex-wrap gap-2">
<plus-chip status="primary" invert>Selected</plus-chip>
<plus-chip status="success" invert>Approved</plus-chip>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-18-card" value="design" aria-label="Select design procurement card"></plus-radio>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">Design Mastercard</h3>
<p class="text-color-caption text-sm">6771 **** 9012 - Emma Clarke</p>
</div>
<div class="flex flex-wrap gap-2">
<plus-chip status="warning" invert>Approval required</plus-chip>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-18-card" value="finance" aria-label="Select finance Amex procurement card"></plus-radio>
<span class="text-color-info text-xs font-semibold">AMEX</span>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">Finance Amex</h3>
<p class="text-color-caption text-sm">3714 **** 1129 - Lara Singh</p>
</div>
<div class="flex flex-wrap gap-2">
<plus-chip status="info" invert>Invoice only</plus-chip>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-5-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-5-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved cards</h2>
<p class="text-color-placeholder text-sm md:text-base">One card needs attention before it can be used for checkout again.</p>
</header>
<div class="border-color-danger bg-color-danger-invert-default flex flex-col gap-3 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<i class="fa-solid fa-triangle-exclamation text-color-danger mt-1" aria-hidden="true"></i>
<div class="min-w-px">
<h3 class="text-color-danger text-base font-semibold">Mastercard ending 9128 expired</h3>
<p class="text-color-caption text-sm">Replace the card to keep subscriptions and scheduled invoices active.</p>
</div>
</div>
<plus-button kind="filled" status="danger" size="lg" class="w-full md:w-auto">Replace card</plus-button>
</div>
<div class="grid gap-4" role="radiogroup" aria-label="Saved cards with expired state">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-5-card" value="visa" checked aria-label="Select Visa ending 8421"></plus-radio>
<div>
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Visa **** 8421</h3>
<plus-chip status="success" invert>Active</plus-chip>
</div>
<p class="text-color-caption text-sm">Billing card - expires 10/29</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</article>
<article class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-5-card" value="mastercard" disabled aria-label="Mastercard ending 9128 is expired"></plus-radio>
<div>
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Mastercard **** 9128</h3>
<plus-chip status="danger" invert>Expired</plus-chip>
</div>
<p class="text-color-caption text-sm">Do not hide expired cards; keep the identity readable for support.</p>
</div>
</div>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</article>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Edit active card</plus-button>
<plus-button kind="outlined" status="danger" size="lg" class="w-full sm:w-auto">Remove expired card</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-17-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Family wallet</p>
<h2 id="saved-cards-17-title" class="text-color-default text-xl font-semibold md:text-2xl">Household cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Manage saved cards and spending permissions for family members.</p>
</header>
<div class="grid gap-4 md:grid-cols-2" role="radiogroup" aria-label="Household saved cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-17-card" value="family-default" checked aria-label="Select household Visa ending 1204"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Household Visa **** 1204</h3>
<p class="text-color-caption text-sm">Parent card - Murat Polat</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<div class="grid gap-3">
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">Child purchases</span>
<plus-toggle checked aria-label="Child purchases enabled"></plus-toggle>
</div>
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">Require approval over $50</span>
<plus-toggle checked aria-label="Approval over 50 enabled"></plus-toggle>
</div>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-17-card" value="teen-card" aria-label="Select teen Mastercard ending 8890"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Teen Mastercard **** 8890</h3>
<p class="text-color-caption text-sm">Member card - Ada Polat</p>
</div>
</div>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<div class="grid gap-3">
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">Online purchases</span>
<plus-toggle aria-label="Online purchases disabled"></plus-toggle>
</div>
<div class="flex items-center justify-between gap-4">
<span class="text-color-caption text-sm">Monthly allowance</span>
<span class="text-color-default text-sm font-medium">$120</span>
</div>
</div>
</article>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto sm:self-end">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add household card
</plus-button>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-14-title">
<article class="border-color-default bg-color-modal flex w-full max-w-6xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Invoice payment</p>
<h2 id="saved-cards-14-title" class="text-color-default text-xl font-semibold md:text-2xl">Choose invoice card</h2>
<p class="text-color-placeholder text-sm md:text-base">Select which saved card should pay the outstanding invoice.</p>
</div>
<div class="border-color-default bg-color-surface rounded border px-4 py-3">
<p class="text-color-caption text-sm">Invoice #INV-2048</p>
<p class="text-color-default text-lg font-semibold">$864.00 due</p>
</div>
</header>
<div class="grid gap-4 md:grid-cols-3" role="radiogroup" aria-label="Invoice payment cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-14-card" value="corporate-visa" checked aria-label="Select corporate Visa ending 2563"></plus-radio>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">Corporate Visa</h3>
<p class="text-color-caption text-sm">5142 **** 2563</p>
</div>
<plus-chip status="primary" invert>Selected</plus-chip>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-14-card" value="procurement" aria-label="Select procurement Mastercard ending 7710"></plus-radio>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">Procurement</h3>
<p class="text-color-caption text-sm">6771 **** 7710</p>
</div>
<plus-chip status="info" invert>Backup</plus-chip>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-14-card" value="paypal" aria-label="Select PayPal invoice wallet"></plus-radio>
<i class="fa-brands fa-paypal text-color-info text-2xl" aria-hidden="true"></i>
</div>
<div>
<h3 class="text-color-default text-base font-semibold">PayPal</h3>
<p class="text-color-caption text-sm">[email protected]</p>
</div>
<plus-chip status="success" invert>Verified</plus-chip>
</article>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Manage cards</plus-button>
<plus-button kind="filled" status="primary" size="lg" class="w-full sm:w-auto">Pay invoice</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-16-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Marketplace payouts</p>
<h2 id="saved-cards-16-title" class="text-color-default text-xl font-semibold md:text-2xl">Payout cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Select the card used for marketplace seller payouts and refunds.</p>
</div>
<plus-chip status="success" invert>Verified account</plus-chip>
</header>
<div class="grid gap-6 lg:grid-cols-5">
<div class="flex flex-col gap-4 lg:col-span-3" role="radiogroup" aria-label="Marketplace payout cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-16-card" value="seller-visa" checked aria-label="Select seller Visa ending 9082"></plus-radio>
<div>
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Seller Visa Debit **** 9082</h3>
<plus-chip status="success" invert>Primary payout</plus-chip>
</div>
<p class="text-color-caption text-sm">Payouts arrive in 1-2 business days.</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-16-card" value="backup-card" aria-label="Select backup Mastercard ending 3310"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Backup Mastercard **** 3310</h3>
<p class="text-color-caption text-sm">Used if the primary payout card fails.</p>
</div>
</div>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</article>
</div>
<aside class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5 lg:col-span-2">
<div>
<p class="text-color-caption text-sm">Next payout</p>
<h3 class="text-color-default text-2xl font-semibold">$2,420.00</h3>
<p class="text-color-caption text-sm">Scheduled for May 24</p>
</div>
<plus-divider></plus-divider>
<div class="grid gap-3">
<plus-button kind="outlined" status="default" size="lg">Edit payout card</plus-button>
<plus-button kind="outlined" status="danger" size="lg">Remove backup</plus-button>
</div>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-12-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-px flex-col gap-2">
<h2 id="saved-cards-12-title" class="text-color-default text-xl font-semibold md:text-2xl">Mobile wallet cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Stored cards connected to browser wallets and mobile pay surfaces.</p>
</div>
<plus-chip status="info" invert>Wallet ready</plus-chip>
</header>
<div class="flex gap-4 overflow-x-auto pb-1" role="radiogroup" aria-label="Mobile wallet cards">
<article class="border-color-primary bg-color-primary-default text-color-default-invert flex h-56 w-72 shrink-0 flex-col justify-between rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-12-card" value="apple-pay" checked aria-label="Select Apple Pay Visa"></plus-radio>
<i class="fa-brands fa-apple-pay text-3xl" aria-hidden="true"></i>
</div>
<div>
<p class="text-sm">Apple Pay</p>
<h3 class="text-xl font-semibold">Visa **** 4410</h3>
</div>
<p class="text-sm">Murat Polat - device verified</p>
</article>
<article class="border-color-default bg-color-surface flex h-56 w-72 shrink-0 flex-col justify-between rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-12-card" value="google-pay" aria-label="Select Google Pay Mastercard"></plus-radio>
<span class="text-color-default text-sm font-semibold">GPay</span>
</div>
<div>
<p class="text-color-caption text-sm">Google Pay</p>
<h3 class="text-color-default text-xl font-semibold">Mastercard **** 7091</h3>
</div>
<div class="flex items-center justify-between gap-3">
<p class="text-color-caption text-sm">Ready for checkout</p>
<button class="text-color-caption flex size-9 items-center justify-center rounded" type="button" aria-label="More Google Pay actions">
<i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
</button>
</div>
</article>
<article class="border-color-default bg-color-surface flex h-56 w-72 shrink-0 flex-col justify-between rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<plus-radio name="saved-cards-12-card" value="paypal" aria-label="Select PayPal wallet"></plus-radio>
<i class="fa-brands fa-paypal text-color-info text-2xl" aria-hidden="true"></i>
</div>
<div>
<p class="text-color-caption text-sm">PayPal</p>
<h3 class="text-color-default text-xl font-semibold">[email protected]</h3>
</div>
<div class="flex items-center justify-between gap-3">
<p class="text-color-caption text-sm">Verified wallet</p>
<button class="text-color-caption flex size-9 items-center justify-center rounded" type="button" aria-label="More PayPal actions">
<i class="fa-solid fa-ellipsis" aria-hidden="true"></i>
</button>
</div>
</article>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto sm:self-end">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Connect wallet card
</plus-button>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-6-title">
<article class="border-color-default bg-color-modal flex w-full max-w-6xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<h2 id="saved-cards-6-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved card grid</h2>
<p class="text-color-placeholder text-sm md:text-base">Manage every stored card from one responsive account surface.</p>
</div>
<plus-button kind="filled" status="primary" size="lg" class="w-full md:w-auto">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add New Card
</plus-button>
</header>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3" role="radiogroup" aria-label="Saved card grid">
<article class="border-color-primary bg-color-primary-invert-default flex min-h-52 flex-col justify-between gap-5 rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-6-card" value="visa" checked aria-label="Select Visa ending 2563"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Visa Business</h3>
<p class="text-color-caption text-sm">Jack Jones JR</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<div class="flex flex-col gap-1">
<p class="text-color-default text-lg font-semibold">5142 **** 2563</p>
<p class="text-color-caption text-sm">Expires 02/29</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<plus-chip status="primary" invert>Default</plus-chip>
<plus-chip status="success" invert>Verified</plus-chip>
</div>
</article>
<article class="border-color-default bg-color-surface flex min-h-52 flex-col justify-between gap-5 rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-6-card" value="mastercard" aria-label="Select Mastercard ending 6402"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Team Mastercard</h3>
<p class="text-color-caption text-sm">Finance shared</p>
</div>
</div>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</div>
<div class="flex flex-col gap-1">
<p class="text-color-default text-lg font-semibold">6771 **** 6402</p>
<p class="text-color-caption text-sm">Expires 11/28</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<plus-chip status="info" invert>Backup</plus-chip>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
<article class="border-color-default bg-color-surface flex min-h-52 flex-col justify-between gap-5 rounded-lg border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-6-card" value="amex" aria-label="Select Amex ending 9801"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Amex Corporate</h3>
<p class="text-color-caption text-sm">Travel desk</p>
</div>
</div>
<span class="border-color-default bg-color-surface text-color-info flex h-9 w-14 items-center justify-center rounded border text-xs font-semibold" aria-label="American Express">AMEX</span>
</div>
<div class="flex flex-col gap-1">
<p class="text-color-default text-lg font-semibold">3714 **** 9801</p>
<p class="text-color-caption text-sm">Expires 08/30</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<plus-chip status="warning" invert>Travel</plus-chip>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
</div>
</article>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-2-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col gap-6 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<h2 id="saved-cards-2-title" class="text-color-default text-xl font-semibold md:text-2xl">Payment Cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Manage the cards connected to your account billing profile.</p>
</header>
<div class="border-color-default overflow-hidden rounded border" role="radiogroup" aria-label="Payment cards">
<article class="bg-color-surface flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-2-card" value="visa" checked aria-label="Select Visa ending 4242"></plus-radio>
<div class="min-w-px">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Visa **** 4242</h3>
<plus-chip status="success" invert>Default</plus-chip>
</div>
<p class="text-color-caption text-sm">Murat Polat - renews subscriptions and invoices</p>
</div>
</div>
<div class="flex items-center justify-between gap-3 md:justify-end">
<span class="border-color-default bg-color-surface flex h-8 w-12 items-center justify-center rounded border" aria-label="Visa">
<i class="fa-brands fa-cc-visa text-color-info text-xl" aria-hidden="true"></i>
</span>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-2-card" value="amex" aria-label="Select Amex ending 1005"></plus-radio>
<div class="min-w-px">
<h3 class="text-color-default text-base font-semibold">Amex **** 1005</h3>
<p class="text-color-caption text-sm">Design systems team - expires 05/29</p>
</div>
</div>
<div class="flex items-center justify-between gap-3 md:justify-end">
<span class="border-color-default bg-color-surface text-color-info flex h-8 w-12 items-center justify-center rounded border text-xs font-semibold" aria-label="American Express">AMEX</span>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-default-default flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-2-card" value="mastercard" disabled aria-label="Mastercard ending 9128 is expired"></plus-radio>
<div class="min-w-px">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Mastercard **** 9128</h3>
<plus-chip status="danger" invert>Expired</plus-chip>
</div>
<p class="text-color-caption text-sm">Expired 01/26 - replace it to continue using this method.</p>
</div>
</div>
<div class="flex items-center justify-between gap-3 md:justify-end">
<span class="border-color-default bg-color-surface flex h-8 w-12 items-center justify-center rounded border" aria-label="Mastercard">
<i class="fa-brands fa-cc-mastercard text-color-danger text-xl" aria-hidden="true"></i>
</span>
<plus-button kind="outlined" status="default" size="sm">Replace</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto sm:self-end">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add payment card
</plus-button>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-1-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex w-full flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-px flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Billing wallet</p>
<h2 id="saved-cards-1-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved Cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Choose the card used for your next checkout and keep outdated cards under control.</p>
</div>
<plus-chip status="success" invert>3 saved</plus-chip>
</header>
<div class="grid w-full gap-4" role="radiogroup" aria-label="Saved payment cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-1-card" value="visa" checked aria-label="Select Visa ending 2563"></plus-radio>
<div class="flex min-w-px flex-col gap-1">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Visa ending 2563</h3>
<plus-chip status="primary" invert>Default</plus-chip>
</div>
<p class="text-color-caption text-sm">Jack Jones JR - Expires 02/29</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-3">
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="Visa">
<i class="fa-brands fa-cc-visa text-color-info text-2xl" aria-hidden="true"></i>
</span>
<span class="text-color-caption text-sm">5142 **** 2563</span>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-1-card" value="mastercard" aria-label="Select Mastercard ending 7781"></plus-radio>
<div class="flex min-w-px flex-col gap-1">
<h3 class="text-color-default text-base font-semibold">Mastercard ending 7781</h3>
<p class="text-color-caption text-sm">Operations card - Expires 11/28</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-3">
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="Mastercard">
<i class="fa-brands fa-cc-mastercard text-color-danger text-2xl" aria-hidden="true"></i>
</span>
<span class="text-color-caption text-sm">6771 **** 7781</span>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-1-card" value="paypal" aria-label="Select PayPal balance"></plus-radio>
<div class="flex min-w-px flex-col gap-1">
<h3 class="text-color-default text-base font-semibold">PayPal balance</h3>
<p class="text-color-caption text-sm">[email protected]</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-3">
<span class="border-color-default bg-color-surface flex h-9 w-14 items-center justify-center rounded border" aria-label="PayPal">
<i class="fa-brands fa-paypal text-color-info text-xl" aria-hidden="true"></i>
</span>
<span class="text-color-caption text-sm">Verified</span>
</div>
</article>
</div>
<div class="flex w-full flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add Card
</plus-button>
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Edit Selected</plus-button>
<plus-button kind="outlined" status="danger" size="lg" class="w-full sm:w-auto">Remove</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-9-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="flex min-w-px flex-col gap-2">
<h2 id="saved-cards-9-title" class="text-color-default text-xl font-semibold md:text-2xl">Subscription payment cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Pick which saved card renews your subscription on the next cycle.</p>
</div>
<plus-chip status="warning" invert>Renews Jun 01</plus-chip>
</header>
<div class="border-color-default bg-color-default-default grid gap-4 rounded border p-4 sm:grid-cols-3">
<div>
<p class="text-color-caption text-sm">Current plan</p>
<p class="text-color-default text-base font-semibold">Plus UI Pro</p>
</div>
<div>
<p class="text-color-caption text-sm">Billing cycle</p>
<p class="text-color-default text-base font-semibold">Annual</p>
</div>
<div>
<p class="text-color-caption text-sm">Renewal total</p>
<p class="text-color-default text-base font-semibold">$1,188.00</p>
</div>
</div>
<div class="grid gap-4 md:grid-cols-2" role="radiogroup" aria-label="Subscription payment cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-9-card" value="visa" checked aria-label="Select Visa subscription card"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Visa Business</h3>
<p class="text-color-caption text-sm">5142 **** 2563</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<p class="text-color-caption text-sm">Used for active Pro plan, team add-ons, and renewal retries.</p>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-9-card" value="amex" aria-label="Select Amex subscription card"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Amex Corporate</h3>
<p class="text-color-caption text-sm">3714 **** 9801</p>
</div>
</div>
<span class="text-color-info text-xs font-semibold">AMEX</span>
</div>
<plus-divider></plus-divider>
<p class="text-color-caption text-sm">Available for upgrade charges and one-time workspace purchases.</p>
</article>
</div>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto">Cancel</plus-button>
<plus-button kind="filled" status="primary" size="lg" class="w-full sm:w-auto">Use selected card</plus-button>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-10-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Team billing</p>
<h2 id="saved-cards-10-title" class="text-color-default text-xl font-semibold md:text-2xl">Shared payment cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Control which shared card can be used by workspace admins.</p>
</header>
<div class="grid gap-4" role="radiogroup" aria-label="Shared team payment cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-10-card" value="operations" checked aria-label="Select operations Visa ending 4456"></plus-radio>
<plus-avatar size="md" text="Operations"></plus-avatar>
<div class="min-w-px">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-color-default text-base font-semibold">Operations Visa **** 4456</h3>
<plus-chip status="primary" invert>Selected</plus-chip>
</div>
<p class="text-color-caption text-sm">Owner: Lara Singh - Admins can use this card</p>
</div>
</div>
<div class="flex items-center gap-3 md:justify-end">
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-10-card" value="marketing" aria-label="Select marketing Mastercard ending 9088"></plus-radio>
<plus-avatar size="md" text="Marketing"></plus-avatar>
<div class="min-w-px">
<h3 class="text-color-default text-base font-semibold">Marketing Mastercard **** 9088</h3>
<p class="text-color-caption text-sm">Owner: Noah Kim - Used for campaign tools</p>
</div>
</div>
<div class="flex items-center gap-3 md:justify-end">
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-10-card" value="product" aria-label="Select product Amex ending 1200"></plus-radio>
<plus-avatar size="md" text="Product"></plus-avatar>
<div class="min-w-px">
<h3 class="text-color-default text-base font-semibold">Product Amex **** 1200</h3>
<p class="text-color-caption text-sm">Owner: Maya Patel - Requires approval over $500</p>
</div>
</div>
<div class="flex items-center gap-3 md:justify-end">
<span class="text-color-info text-xs font-semibold">AMEX</span>
<plus-button kind="outlined" status="default" size="sm">Edit</plus-button>
<plus-button kind="outlined" status="danger" size="sm">Remove</plus-button>
</div>
</article>
</div>
<plus-button kind="outlined" status="default" size="lg" class="w-full sm:w-auto sm:self-end">
<i slot="prefix" class="fa-solid fa-plus" aria-hidden="true"></i>
Add shared card
</plus-button>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="saved-cards-15-title">
<article class="border-color-default bg-color-modal flex w-full max-w-5xl flex-col gap-8 rounded border p-6 md:p-8">
<header class="flex flex-col gap-2">
<p class="text-color-caption text-sm font-medium">Travel checkout</p>
<h2 id="saved-cards-15-title" class="text-color-default text-xl font-semibold md:text-2xl">Saved travel cards</h2>
<p class="text-color-placeholder text-sm md:text-base">Separate personal and business cards before confirming the reservation.</p>
</header>
<div class="grid gap-5 md:grid-cols-2" role="radiogroup" aria-label="Travel checkout saved cards">
<article class="border-color-primary bg-color-primary-invert-default flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-15-card" value="business" checked aria-label="Select business Visa ending 1120"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Business trip Visa</h3>
<p class="text-color-caption text-sm">5142 **** 1120 - Jack Jones JR</p>
</div>
</div>
<i class="fa-brands fa-cc-visa text-color-info text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<dl class="grid gap-2">
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Policy</dt>
<dd class="text-color-default text-sm font-medium">Approved for flights</dd>
</div>
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Receipt email</dt>
<dd class="text-color-default text-sm font-medium">[email protected]</dd>
</div>
</dl>
</article>
<article class="border-color-default bg-color-surface flex flex-col gap-5 rounded border p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex min-w-px items-start gap-3">
<plus-radio name="saved-cards-15-card" value="personal" aria-label="Select personal Mastercard ending 5012"></plus-radio>
<div>
<h3 class="text-color-default text-base font-semibold">Personal Mastercard</h3>
<p class="text-color-caption text-sm">6771 **** 5012 - Murat Polat</p>
</div>
</div>
<i class="fa-brands fa-cc-mastercard text-color-danger text-3xl" aria-hidden="true"></i>
</div>
<plus-divider></plus-divider>
<dl class="grid gap-2">
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Policy</dt>
<dd class="text-color-default text-sm font-medium">Personal expense</dd>
</div>
<div class="flex items-center justify-between gap-4">
<dt class="text-color-caption text-sm">Receipt email</dt>
<dd class="text-color-default text-sm font-medium">[email protected]</dd>
</div>
</dl>
</article>
</div>
<div class="border-color-default bg-color-default-default flex flex-col gap-3 rounded border p-4 md:flex-row md:items-center md:justify-between">
<div class="flex items-start gap-3">
<i class="fa-solid fa-circle-info text-color-info mt-1" aria-hidden="true"></i>
<p class="text-color-caption text-sm">The selected card will be charged when the hotel confirms availability.</p>
</div>
<plus-button kind="filled" status="primary" size="lg" class="w-full md:w-auto">Use selected card</plus-button>
</div>
</article>
</section>
Saved Cards blocks help users review, select, and manage stored payment cards in account billing, checkout, subscription, team, and commerce settings. This restored family intentionally contains 20 static variations, all using code-preview examples and local token-built provider marks rather than remote payment images.
The first seven variations restore the Figma-backed saved-card set from the original payment workflow notes. Variations 8 through 20 expand the same family into realistic account, subscription, team billing, security, mobile wallet, invoice, marketplace payout, family wallet, procurement, recovery, and add-card states.
plus-divider for repeated row separation and Plus UI buttons for management actions.Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.
© Plus UI 2026
Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.
Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.
We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.
Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.
Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.
The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.
For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.
The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.
Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.
Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.
The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.
The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.
Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.
The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.
The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.
Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.
Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.
In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.