Card
@sushindustries/uiTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.
Props
| Prop | Type | Default | Does |
|---|---|---|---|
title | string | - | |
meta? | string | - | Shown top-right, in the label style. A version, a date, a count. |
children? | ReactNode | - | |
href? | string | - | Renders the card as a link. Omit for a plain container. |
as? | "h2" | "h3" | "h3" | Heading level, so a card can sit under the right heading. |
image? | string | - | A picture across the top: the image card. The card supplies the frame and the crop; the image supplies everything else, which is why there is no variant prop - a card with an image is the image variant. |
imageAlt? | string | "" | Alt text for the image. Empty means decorative, which is the default. |
icon? | IconName | - | A glyph on a tile beside the title: the category card. |
tone? | string | - | Colour family for the icon tile, resolved by the stylesheet. |
Notes
image and iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content can be combined - the image bleeds across the top and
the icon tile still sits beside the title beneath it - but imageAlt
without image does nothing, since there is no <img> to attach it to.
href starting with http@sushindustries/httpThe five things a server decides about a response before it decides what is in it: canonical origin, cache lifetime, content security policy, embed allowlist, and content negotiation.package gets target="_blank" and
rel="noopener noreferrer" automatically; a relative href never does,
so an external link only needs the full URL to get the right behaviour.