<.credit_card>

The card a customer has on file, drawn as a card. A row of text saying "Visa ending 4242" carries the same facts, but a payment method is one of the few things in a settings page a customer recognises faster by shape than by reading. Drawing it also gives the section something to hang a CTA beside without the CTA being the only thing there. Sized by width alone: the aspect ratio is fixed to the 316x190 the design works at, so a caller constrains the width and the height follows. It renders narrower than that by default, because the card carries only a name, a number and a mark, and at the design's full width the space between them reads as something missing rather than as a card. `expires` is optional and sits under the number, where a card carries it. It was left off originally on the grounds that nobody acts on it, which is true right up until the card is about to expire and the subscription renews on it. Rendering it costs the one line the bottom of the card had to spare, and the label is spelled out because a bare `03/28` beside a masked number is the one place on a card face a date can be misread. Everything inside is sized in `cqw` against the card's own container, which is what keeps a narrow card looking like a card rather than like a card with wrapped text: type that stays at 16px while the box shrinks breaks the number onto two lines. The reference implementation gets the same result by rendering at a fixed size and scaling with a transform, which blurs text on fractional scales. The percentages here are the design's pixel values over 316. The outer element only establishes the container and the ratio. Everything drawn, the radius included, sits on the child, because `cqw` on the container itself resolves against an ancestor container or the viewport rather than against itself, which silently turns the corner radius into whatever a percentage of the window happens to be. `number` is expected to be already masked. This component does not mask it, because it has no way to tell a masked number from a real one, and quietly rendering a full PAN because the caller passed the wrong thing is not a failure mode worth leaving open. The brand mark carries its own tile in the network's own colour, so it stays legible on the card's gradient. An unknown brand, or one the vendored set does not cover, falls back to a plain card glyph rather than a gap.