Components / Preview Card

Preview Card

For sighted users to preview content available behind a link. Opens on hover or keyboard focus after a short delay, positions itself against the trigger, and dismisses on Escape or outside interaction, all from the brain. This preview is the real component running in WebAssembly.

Examples

@nextjs

razor

<ZitsPreviewCard>
    <ZitsPreviewCardTrigger class="...">@@nextjs</ZitsPreviewCardTrigger>
    <ZitsPreviewCardContent class="w-80">
        <div class="flex justify-between gap-4">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold">VC</div>
            <div class="space-y-1">
                <h4 class="text-sm font-semibold">@@nextjs</h4>
                <p class="text-sm">The React Framework – created and maintained by @@vercel.</p>
                <span class="text-xs text-muted-foreground">Joined December 2021</span>
            </div>
        </div>
    </ZitsPreviewCardContent>
</ZitsPreviewCard>

Installation

Terminal bash

navius add preview-card

API reference

ZitsPreviewCard

Prop	Type	Default
OpenDelay	int	600
CloseDelay	int	300
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false

ZitsPreviewCardContent

Prop	Type	Default
Side	string	"bottom"
Align	string	"center"
SideOffset	double	4