Card

A base-styled container with no variants. Components with nothing to vary are still valid; base alone is a complete config.

Authoring

// recipes/card.config.ts
import { defineComponent } from 'varia'

export default defineComponent('card', {
  base: 'block rounded-lg border border-gray-200 bg-white shadow-sm',
})

No variants block. defineComponent accepts this; base alone is a valid component. The generated manifest contains a single class name: card.

Live preview

Card title

Card body. The .card class only handles the outer container; padding inside is the consumer's choice.

Consumption

<article class="card">
  <header class="p-4 border-b border-gray-200">
    <h3 class="font-medium">Card title</h3>
  </header>

  <div class="p-4">
    <p>Card body</p>
  </div>
</article>

The header and body styling are plain utilities, not part of the card component's vocabulary. If you find yourself using the same header pattern across many cards, that's the moment to graduate card into a slot component with header, body, and footer slots. See the Modal recipe for the shape.

When to add variants

You don't need them yet, but watch for:

• Two or more callers manually overriding the same property (bg-blue-50, bg-amber-50); that's a candidate for c: { ... }.
• A pattern emerging where you compose card with border-2 border-blue-500 for an accent; that's an accent: '...' boolean variant waiting to happen.
• More than three of these and you're growing into the Button recipe's shape.