components card

components/card

Import: import { CardMedia, CardHeader, CardBody, CardFooter, Card } from "@tundralibs/ui/card"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

CardMedia

CardMedia(props: CardMediaProps): Html

CardHeader

CardHeader(props: CardHeaderProps, opts = …: { titleHref?: string }): Html

CardBody

CardBody(body: string | Html): Html

CardFooter

CardFooter(props: CardFooterProps): Html

Card

Card(props: CardProps): Html

Types

CardVariant

• "outlined"
• "elevated"
• "flat"
• "danger"

CardOrientation

• "vertical"
• "horizontal"

CardTag

• "div"
• "a"
• "button"

CardMediaRatio

• "wide"
• "square"
• "tall"
• "banner"

CardMediaProps

Prop	Type	Required	Description
src	string	yes
alt	string	yes
ratio	CardMediaRatio
loading	`"lazy"	"eager"`
overlay	`string	Html`

CardHeaderProps

Prop	Type	Required	Description
avatar	`string	Html`
title	`string	Html`
subtitle	`string	Html`
actions	`string	Html`

CardFooterProps

Prop	Type	Required	Description
content	`string	Html`	yes
split	boolean

CardProps

Extends CardHeaderProps.

Prop	Type	Required	Description
id	string
as	CardTag		Forces the root element's tag; overrides the href stretched-link behavior below (falls back to wrapping the whole root in <a>).
href	string		Makes the card link to href without wrapping the whole thing in an <a> — the title becomes a "stretched link" covering the full card (or, with no title, an invisible full-card link), so actions/ footer buttons keep working instead of the anchor swallowing their clicks.
variant	CardVariant
orientation	CardOrientation
interactive	boolean		Hover/focus affordance; also makes a non-link root focusable.
selected	boolean
media	CardMediaProps
body	`string	Html`
footer	`string	Html`
footerSplit	boolean
attrs	Attrs		Escape hatch for rAPId's data-* wiring, aria-*, etc.

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A linked summary card

href makes the title a stretched link, so the whole card is clickable without wrapping it in an <a>.

Card({
  title: "Northwind Traders",
  subtitle: "12 open invoices",
  href: "/clients/northwind",
  body: html`<p>Last payment received 2 days ago.</p>`,
  footer: Badge({ label: "Active", variant: "success", dot: true }),
})

<div class="card card--clickable">
  <div class="card__content">
    <div class="card__header">
      <div class="card__heading">
        <div class="card__title">
          <a class="card__title-link" href="/clients/northwind">Northwind Traders</a>
        </div>
        <div class="card__subtitle">12 open invoices</div>
      </div>
    </div>
    <div class="card__body">
      <p>Last payment received 2 days ago.</p>
    </div>
    <div class="card__footer">
      <span class="badge badge--success">
        <span class="badge__dot" aria-hidden="true"></span>
        Active
      </span>
    </div>
  </div>
</div>

CSS hooks

Classes defined by components/card/card.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.card, .card--clickable, .card--danger, .card--elevated, .card--flat, .card--horizontal, .card--selected, .card__actions, .card__avatar, .card__body, .card__content, .card__footer, .card__footer--split, .card__header, .card__heading, .card__media, .card__media--banner, .card__media--square, .card__media--tall, .card__media-overlay, .card__meta, .card__stretch-link, .card__subtitle, .card__title, .card__title-link