Elevation Card

Shadow level display card showing a single elevation token with its name and token reference.

Preview

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

Installation

npx visor add elevation-card

This copies two files into your project:

components/ui/elevation-card/elevation-card.tsx — the component
components/ui/elevation-card/elevation-card.module.css — the styles

Usage

import { ElevationCard } from '@/components/ui/elevation-card/elevation-card';

<ElevationCard token="--shadow-md" name="md" />

API Reference

ElevationCardProps

Prop	Type	Default	Description
`token`*	`string`	—	CSS custom property for the shadow (e.g. "--shadow-md").
`name`*	`string`	—	Display name for the shadow level (e.g. "md").
`className`	`string`	—	Additional CSS class names to merge onto the element.

ElevationCard is a documentation utility component. It uses box-shadow to visualize shadow tokens and does not convey interactive behavior. Render it inside a landmark region with an appropriate heading when used in design system documentation pages.