Primitives

Card

A surface with padding and an optional border or shadow.

data-scope="card"

Usage

import { Card } from "@crosskit-ui/react";

<Card variant="outline">Anything at all</Card>
<script setup lang="ts">
import { Card } from "@crosskit-ui/vue";
</script>

<template>
  <Card variant="outline">Anything at all</Card>
</template>
<script lang="ts">
  import { Card } from "@crosskit-ui/svelte";
</script>

<Card variant="outline">Anything at all</Card>
import { CkCard } from "@crosskit-ui/angular";

@Component({
  imports: [CkCard],
  template: `<ck-card variant="outline">Anything at all</ck-card>`,
})
export class Demo {}

Props

PropTypeDefaultNotes
variant"elevated" | "outline" | "filled""elevated"Surface treatment.
padding"none" | "sm" | "md" | "lg""md"Inner spacing.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.