Catalog Billing

<.card_brand>

ConnieUI.Billing

HEEx
<ConnieUI.Layouts.inline>
  <ConnieUI.Billing.card_brand :for={brand <- @brands} brand={brand} class="h-8 w-12" />
  <ConnieUI.Billing.card_brand class="h-8 w-12 text-fg-quaternary" />
</ConnieUI.Layouts.inline>

Controls

:string

Set by the example

class

Docs

The payment network's mark for a card. The only place that knows where these files live, so nothing else has to spell out `/images/card-brands/...` and nothing else has to remember which networks we actually carry a mark for. An `<img>` rather than a background class, which is what the flags use. `Connie.Contracts.ContractRenderer` embeds the CSS bundle into every rendered document and base64-inlines every `url()` in it, so a mark in the stylesheet is weight in every PDF for something a PDF cannot show. `brand` is nil for a network we have no mark for, which the caller gets from `Connie.Stripe.Customer.card_brand_mark/1`. That draws a plain card glyph instead, so an unrecognised card still reads as a card. `class` covers both: the size applies either way, and a colour only reaches the fallback glyph, the mark carrying its own.
Attribute Type Default Description
brand :string nil
class :any nil
rest :global