Card skeleton (VCardSkeleton)

<VCardSkeleton />

Controls

Rows 3

Media height

Shimmer animation

Base colour

The picker cannot show transparency. Type an rgba() value to keep it.

Highlight colour

The picker cannot show transparency. Type an rgba() value to keep it.

Accessible label

Blocks

MediaAvatar

Implementation

<script setup lang="ts">
import { VCardSkeleton } from "veload";
import "veload/style.css";
</script>

<template>
  <VCardSkeleton />
</template>

<script setup lang="ts">
import { VCardSkeleton } from "veload";
import "veload/style.css";
</script>

<template>
  <VCardSkeleton />
</template>

import { VCardSkeleton, type VCardSkeletonProps } from "veload";

const props: VCardSkeletonProps = {
};

// Render it: <VCardSkeleton v-bind="props" />

npm install veload

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({
  css: ["veload/style.css"],
});

// Vite / Webpack — main.ts
import "veload/style.css";

Props

VCardSkeleton props
Prop	Type	Default	Description
`rows`	`number`	`3`	Number of repeated text lines, list items, fields or data rows. Clamped to 1–12. Table and dashboard headers are separate; dashboard always includes one fixed header.
`mediaHeight`	`number \| string`	`—`	Height of the media block in pixels or any CSS length.
`showMedia`	`boolean`	`true`	Toggles the media block where the pattern supports one.
`showAvatar`	`boolean`	`true`	Toggles the avatar block where the pattern supports one.
`color`	`string`	`—`	Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`.
`highlightColor`	`string`	`—`	Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`.
`animated`	`boolean`	`true`	Enables the shimmer animation. Reduced-motion preferences always disable it.
`label`	`string`	`—`	Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology.

About this preset

Optional media block plus an inline avatar and title row.
Matches the shape of a typical content card.
Toggle `showMedia` and `showAvatar` independently.

Controls

Implementation

Props

About this preset

More presets