Card

WHEN TO USE

• You are building a grid of practice areas, offers or capabilities where each entry has a heading, a short body and a list of what is included. That is variant="service", and the whole card is one link.
• You are listing things a reader can go and run — packages, repos, CLIs — where the most useful first line is the command itself. That is variant="tool", with the command in the command property.
• You want the base card and nothing brand-specific. Leave variant unset and this behaves exactly as Altitude's card does, because it is the same component contract.
• You are listing posts or case studies, each with artwork that should reach the edges of the card. That is variant="article" (or work, the case-study cut with a wider media ratio and a shallower excerpt clamp).
• A row of cards should share one height and line their footer cues up. Set fill; under tool, article and work the footer is pinned to the bottom edge, so the cues line up however long each description runs.

WHEN NOT TO USE

• The subject is a logo, and what you want is a wall of them at a shared optical weight. That is a different problem — grid rhythm and greyscale treatment, not a bounded surface per subject.USE LOGO-WALL →
• You only need to arrange cards with spacing between them. Arrangement is never a card's job — the grid the homepage lays these out in is the layout primitive, not anything declared here.USE LAYOUT →
• What you are showing is one number with a label and a trend. That has its own component with the typography and the delta treatment already decided.USE STAT →
• The content is a quotation with an attribution. A card gives it a surface but none of the semantics a quote needs.USE TESTIMONIAL →

DO

• Use href rather than wrapping the card in your own <a>. It makes the whole surface one link target with one focus ring, which is what every brand variant is — a card wrapped from outside gives you a link around a link.
• Let article and work pick their own heading scale. Left unset, heading-variant resolves to lg for a work card or a featured article and md otherwise, which is the judgment the consuming site used to make inline at every call site.
• Add the accent › bullets for a service card's list in your own stylesheet, scoped to al-card[variant='service'] ul[slot='list'] li. The component cannot do it and the reason is structural, not an oversight.
• Set command-prefix as a kebab-case attribute, not commandPrefix. HTML lowercases attribute names, so the camelCase spelling never reaches the property and the prefix silently falls back to $.
• Use fill rather than an inline height: 100%. :host is display: contents, so a height written on <al-card> from outside is dropped entirely.

DON’T

• Don't put a button inside a service, tool, article or work card. Each is a single link in its entirety, and a nested interactive region leaves a keyboard user with no way to tell which target they are about to activate.
• Don't import the base al-card module alongside this one. Both packages publish the same tag, customElements.define is first-come and final, and the loser's markup renders into an element that never upgrades.
• Don't reach for a brand variant just to get a border and some padding. Each carries the brand's display face, its mono face and its own rhythm — use the default variant, which is the plain surface.
• Don't expect the image SLOT to bleed to the edge. It sits inside the card's padding exactly as Altitude's does, because three example apps put an <al-avatar> there. Edge-to-edge media is what the image PROPERTY plus variant="article" or work gives you.
• Don't slot a second heading into the cue slot. It is a decorative glyph position, sized and coloured as chrome.