Card
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add display/cardPlain-CSS theme — no build step
npx astrocraft-ui add display/card --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add display/card --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/card --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/card --theme tailwind --bridge lumosLive demo
Card
Card title
A compound card: header, content, footer.
Body content sits in CardContent. Tokens flip with the theme.
default
variant="default"
Same markup, different elevation.
elevated
variant="elevated"
Same markup, different elevation.
outline
variant="outline"
Same markup, different elevation.
interactive
variant="interactive"
Same markup, different elevation.
Size sm
size="sm"
Retunes header / content / footer padding at once.
Size md
size="md"
Retunes header / content / footer padding at once.
Size lg
size="lg"
Retunes header / content / footer padding at once.
Media card
overflow-hidden on the root rounds the image corners.
Top, bottom, or full-bleed — all just work.
Shipping a token-driven UI
How the palette → semantic → utility bridge keeps dark mode free.
Jane Doe
Jul 1, 2026 · 4 min read
Horizontal layout
Image beside content on ≥sm.
The image stretches to the card's height.
Top-bordered accent
A status stripe is one class (border-t-4 border-t-primary).
No primitive change needed for a one-off.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Card.astro` | `card` | `data-variant`: `default` · `elevated` · `outline` · `interactive` `data-size`: `sm` · `md` · `lg` | — | — |
| `CardAction.astro` | `card-action` | — | — | — |
| `CardContent.astro` | `card-content` | — | — | — |
| `CardDescription.astro` | `card-description` | — | — | — |
| `CardFooter.astro` | `card-footer` | — | — | — |
| `CardHeader.astro` | `card-header` | — | — | — |
| `CardImage.astro` | `card-image` | — | — | — |
| `CardTitle.astro` | `card-title` | — | — | — |
Source
What the command copies — 9 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
variant?: "default" | "elevated" | "outline" | "interactive";
size?: "sm" | "md" | "lg";
};
const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="card" data-variant={variant} data-size={size} {...rest}>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="card-action" {...rest}><slot /></div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="card-content" {...rest}><slot /></div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"p">;
const { class: className, ...rest } = Astro.props;
---
<p class={className} data-slot="card-description" {...rest}><slot /></p>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="card-footer" {...rest}><slot /></div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="card-header" {...rest}><slot /></div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"img">;
const { alt = "", class: className, ...rest } = Astro.props;
---
<img alt={alt} class={className} data-slot="card-image" {...rest} />
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"h3">;
const { class: className, ...rest } = Astro.props;
---
<h3 class={className} data-slot="card-title" {...rest}><slot /></h3>
import Card from "./Card.astro";
import CardAction from "./CardAction.astro";
import CardContent from "./CardContent.astro";
import CardDescription from "./CardDescription.astro";
import CardFooter from "./CardFooter.astro";
import CardHeader from "./CardHeader.astro";
import CardImage from "./CardImage.astro";
import CardTitle from "./CardTitle.astro";
export {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardImage,
CardTitle,
};
export default Card;
What you get
The component source, copied into your project by npx astrocraft-ui add display/card — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.