Card

Headless surface primitive for consumer-owned card, panel, and section composition.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Card } from "@vizejs/ui/card";

Or copy the source into your project with vize lib pull card (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Article card labelled by its heading, with summary text and a call to action. -->
<script setup lang="ts">
import { useId } from "vue";

import { Card } from "@vizejs/ui/card";

const headingId = useId();
</script>

<template>
  <Card as="article" :aria-labelledby="headingId">
    <h3 :id="headingId">Release 2.4</h3>
    <p>Faster SSR, a new calendar family, and smaller bundles across every entry point.</p>
    <a href="#release-notes">Read the release notes</a>
  </Card>
</template>

API

Card

Source: src/families/layout/card/card.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for card.vue (@vizejs/ui/card). Every row is proven by the named mounted-DOM or SSR test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

Card never sets role, tabindex, aria-hidden, aria-live, aria-label, or aria-labelledby by default. Consumers choose whether a surface is a region, article, list item, form group, decorative wrapper, or focusable panel by passing ordinary Vue fallthrough attributes.

CSS Custom Properties

The Card component entry remains headless and emits no stylesheet. The separate @vizejs/ui/component-card.css export supplies optional spacing, border, and surface treatment through low-specificity --vize-ui-card-* properties. The theme scope selects Paper, Signal, or Atelier details; application CSS can override any of them without changing Card markup.

Parts