Skeleton preset

Article

Long-form reading layout

VArticleSkeletonarticle pattern

<VArticleSkeleton />

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.

Blocks

Implementation

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

<template>
  <VArticleSkeleton />
</template>

Props

VArticleSkeleton props
PropTypeDefaultDescription
rowsnumber3Number 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.
mediaHeightnumber | string—Height of the media block in pixels or any CSS length.
showMediabooleantrueToggles the media block where the pattern supports one.
colorstring—Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`.
highlightColorstring—Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`.
animatedbooleantrueEnables the shimmer animation. Reduced-motion preferences always disable it.
labelstring—Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology.

About this preset

  • Optional media block followed by a headline and body rows.
  • The last row is shortened so the block looks like real copy.
  • Use `showMedia` to remove the leading image.