Components
PreviewCard
A link preview card that shows a thumbnail, title, and description. Ideal for URL previews and content summaries.
Import
import { PreviewCard } from "@sigil-ui/components";Preview
Usage
<PreviewCard
href="https://sigil-ui.dev"
title="Sigil UI"
description="Token-driven React component library"
image="/og-image.png"
/>Without image
<PreviewCard
href="https://example.com"
title="Example Domain"
description="This domain is for use in illustrative examples."
/>Compact variant
<PreviewCard
variant="compact"
href="https://sigil-ui.dev"
title="Sigil UI"
description="Token-driven components"
image="/og-image.png"
/>Renders the image as a small square thumbnail on the left.
Token integration
| CSS Variable | Used for |
|---|---|
--s-surface | Card background |
--s-surface-elevated | Hover background |
--s-border | Card border |
--s-text | Title color |
--s-text-muted | Description and URL color |
--s-card-radius | Border radius |
--s-shadow-sm | Resting elevation |
--s-duration-fast | Hover transition |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link URL |
title | string | — | Preview title |
description | string | — | Preview description |
image | string | — | Thumbnail image URL |
variant | "default" | "compact" | "default" | Layout variant |
target | string | "_blank" | Link target |
className | string | — | Additional CSS classes |
Accessibility
- Renders as an
<a>element wrapping the card content - Image has an empty
altsince the title provides context - Focus ring uses
--s-border-interactive