directus/docs/reference/app/components/v-card.md

Card

A card is nothing but a v-sheet with predefined building blocks to enforce consistency.

Usage

<v-card>
	<v-card-title>Hello, world!</v-card-title>
	<v-card-subtitle>This is a card</v-card-subtitle>
	<v-card-text>Consectetur enim ullamco sint sit deserunt proident consectetur.</v-card-text>
	<v-card-actions>
		<v-button>Save</v-button>
	</v-card-actions>
</v-card>

Cards can be used to consistently style dialogs:

<v-dialog>
	<template #activator="{ on }">
		<v-button @click="on">Show dialog</v-button>
	</template>

	<v-card>
		<v-card-title>Are you sure you want to delete 1 item?</v-card-title>
		<v-card-actions>
			<v-button secondary outlined>Cancel</v-button>
			<v-button>Yes</v-button>
		</v-card-actions>
	</v-card>
</v-dialog>

Reference

Props

Prop	Description	Default	Type
disabled	Disable the card, prevents all cursor interaction	false	Boolean
tile	Render without rounded corners	false	Boolean

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

Variable	Default
--v-card-min-width	none
--v-card-max-width	400px
--v-card-min-height	none
--v-card-max-height	min-content
--v-card-padding	16px
--v-card-background-color	var(--background-subdued)
--v-card-height	auto

---

Card Title

Functional component that enforces consistent styling.

Usage

<v-card-title>Hello, world!</v-card-title>