Card

useCard(options) creates an <article class="card"> with optional header, body and footer. cardClass(options) returns the classes for SSR markup.

Demo

import { useCard } from "@katanakit/ui";

grid.append(
  useCard({ title: "Revenue", children: ["$12,400"], footer: "Updated 5 min ago" }),
  useCard({ title: "Churn", children: ["2.1%"], elevated: true }),
);

Contract

Every component in the kit follows one shape. Pure builders return a class string and touch nothing; factories build a DOM element and need a browser.

Surface	Import	Needs a DOM
Pure class builder	cardClass	No — safe during SSR
Element factory	useCard	Yes — throws with a pointer to the pure surface

// Server and templates — pure
<div class={ cardClass({ /* … */ }) }></div>

// Browser — imperative
document.body.append(useCard({ /* … */ }));

Class names are unprefixed. The root class is card, not kk-card, and every component rule is wrapped in @layer katana.

That matters because these names collide 1:1 with daisyUI. Unlayered CSS always beats layered CSS regardless of specificity or import order, so loading both is deterministic instead of "whoever came last". See why.

Options

Option	Type	Default	Notes
title	string	—	Renders .card__header + title.
children	Array<Node | string>	[]	Appended to .card__body.
footer	string	—	Renders .card__footer.
elevated	boolean	false	Replaces the border with a shadow.

Composition

Cards are plain containers: put any node (table, form, chart) in children. The kit never owns the data — bind it to Safe Results from katanakit-js.