DOM Studio

Visual primitive

Card

<DomCard>

A visual-only frame for grouped content, styled by the skin-raised theme recipe.

Playground

Try every prop live

Card playground

Cards are visual-only: skin-raised provides the material recipe and spacing, while your markup decides the content.

Skin card

This primitive uses skin-raised, so borders, shadows, gradients, and glass effects come from theme tokens.

Playground.vuevue
<script setup>
import { reactive } from 'vue';
import { DomCard } from '@getdom/studio/vue';

const data = reactive({
	  "as": "div",
	  "padding": "md",
	  "interactive": false
	});
</script>

<template>
	<DomCard
		v-bind="data"
	/>
</template>

Demo

Basic content card

Use DomCard for grouped content that needs a consistent skin recipe.

Workspace

Design system audit

Review token usage and component coverage before the next release.

On track
Basic.vuevue
<script setup>
import { DomButton, DomCard } from '../../../lib/vue';
</script>

<template>
	<DomCard class="max-w-sm">
		<div class="space-y-4">
			<div>
				<p class="text-sm font-medium text-muted-fg">Workspace</p>
				<h3 class="mt-1 text-xl font-semibold tracking-tight">Design system audit</h3>
				<p class="mt-2 text-sm leading-6 text-muted-fg">
					Review token usage and component coverage before the next release.
				</p>
			</div>
			<div class="flex items-center justify-between border-t border-border pt-4">
				<span class="rounded-full bg-success/15 px-2.5 py-1 text-xs font-medium text-success">On track</span>
				<DomButton variant="secondary" size="sm">Open</DomButton>
			</div>
		</div>
	</DomCard>
</template>

Demo

Token-driven glass

Glass is a skin recipe, so it can be applied by changing CSS variables rather than component props.

Today

42,860

Monthly active sessions

Glass.vuevue
<script setup>
import { DomButton, DomCard } from '../../../lib/vue';
</script>

<template>
	<div class="grid w-full max-w-2xl gap-4 sm:grid-cols-[1fr_0.8fr]">
		<DomCard padding="lg" class="min-h-64">
			<div class="flex h-full flex-col justify-between gap-8">
				<div>
					<p class="text-xs font-semibold uppercase tracking-[0.16em] text-muted-fg">Today</p>
					<h3 class="mt-3 text-3xl font-semibold tracking-tight">42,860</h3>
					<p class="mt-2 text-sm text-muted-fg">Monthly active sessions</p>
				</div>
				<div class="grid grid-cols-6 items-end gap-1.5">
					<span v-for="height in [36, 54, 44, 72, 62, 92]" :key="height" class="rounded-t-lg bg-primary/80" :style="{ height: `${height}px` }"></span>
				</div>
			</div>
		</DomCard>

		<DomCard interactive as="button" class="w-full text-left">
			<div class="space-y-5">
				<div class="flex items-center gap-3">
					<img
						src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=80"
						alt=""
						class="size-12 rounded-full object-cover ring-2 ring-background"
					>
					<div>
						<p class="font-semibold">Avery Stone</p>
						<p class="text-sm text-muted-fg">Product lead</p>
					</div>
				</div>
				<p class="text-sm leading-6 text-muted-fg">
					Glass cards come from skin tokens, so theme contrast stays predictable.
				</p>
				<DomButton variant="primary" size="sm">Message</DomButton>
			</div>
		</DomCard>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
asstringstring'div'The HTML element or component to render. Use 'section', 'article', or a router-link when useful.
padding'none' | 'sm' | 'md' | 'lg'string'md'Internal spacing. Use none when the card owns its own internal layout.
interactivebooleanbooleanfalseAdd a restrained hover lift for clickable cards.

Auto-generated from Card.props and inline _edit hints.

Slots

NameScopeDescription
#(default)—Card content.