Skeleton preset
Product card
Catalogue product placeholder
VProductCardSkeletonproduct pattern
<VProductCardSkeleton />
Controls
The picker cannot show transparency. Type an rgba() value to keep it.
The picker cannot show transparency. Type an rgba() value to keep it.
Implementation
<script setup lang="ts">
import { VProductCardSkeleton } from "veload";
import "veload/style.css";
</script>
<template>
<VProductCardSkeleton />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
mediaHeight | number | string | — | Height of the media block in pixels or any CSS length. |
showRating | boolean | true | Toggles the rating block used by the product pattern. |
showPrice | boolean | true | Toggles the price block used by the product pattern. |
showCta | boolean | true | Toggles the call-to-action block used by the product pattern. |
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
- Media, title, rating, price and call-to-action blocks.
- Each optional block can be switched off individually.
- Matches the structure of a commerce product card.