Card brand
A payment-brand logo on its own chip. Self-hosted SVGs, no payment SDK.
vue
<script setup lang="ts">
import SaCardBrand from '@shared/components/common/SaCardBrand.vue'
</script>
<template>
<div class="flex items-center gap-3">
<SaCardBrand brand="visa" />
<SaCardBrand brand="mastercard" />
<SaCardBrand brand="amex" />
<SaCardBrand brand="paypal" />
</div>
</template>Usage
brand is one of visa, mastercard, amex or paypal. The marks are self-hosted SVGs; nothing is loaded from a payment provider.
The chip is white in both color modes, deliberately. These are brand marks rather than icons: Visa is navy on white and Amex is white on blue, so on the page's own surface one of them disappears in each theme. The border carries the theme instead.
The mark is contained inside a fixed box, because the four assets have different aspect ratios and would otherwise each end up a different size.
Examples
In a list of payment methods
vue
<script setup lang="ts">
import SaCardBrand from '@shared/components/common/SaCardBrand.vue'
import SaListGroup from '@shared/components/common/list/SaListGroup.vue'
import SaListGroupItem from '@shared/components/common/list/SaListGroupItem.vue'
import { Badge } from '@shared/components/ui/badge'
</script>
<template>
<SaListGroup class="max-w-md">
<SaListGroupItem title="Visa ending 4242" description="Expires 08/2029" active>
<template #leading>
<SaCardBrand brand="visa" />
</template>
<template #trailing>
<Badge variant="secondary">
Default
</Badge>
</template>
</SaListGroupItem>
<SaListGroupItem title="Mastercard ending 8801" description="Expires 02/2028">
<template #leading>
<SaCardBrand brand="mastercard" />
</template>
</SaListGroupItem>
<SaListGroupItem title="PayPal" description="billing@northwind.example">
<template #leading>
<SaCardBrand brand="paypal" label="PayPal account" />
</template>
</SaListGroupItem>
</SaListGroup>
</template>API
Source: src/shared/components/common/SaCardBrand.vue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | 'visa' | 'mastercard' | 'amex' | 'paypal' | required | Picks the mark. |
label | string | — | The alt text. Falls back to the brand's own name, such as "American Express". |
Emits
None.
Slots
None.
Accessibility
- The mark has real alt text, the brand's name, because a card ending in four digits does not say which network it is on.
- The chip does not shrink, so a row of cards keeps its rhythm whatever is beside it.
- The image loads lazily and decodes asynchronously.