Designing content that travels well
Postkit Journal
A field guide to portable semantics, host-owned themes, and renderer boundaries.
#component-preview
LinkPreview. A portable inline link, metadata card, native media player, or isolated rich embed.
- Discovery
- Interactive
- Stability · Initial
- ::postkit-link-preview
Usage.
<LinkPreview
href="#component-preview"
title="Designing content that travels well"
description="A field guide to portable semantics, host-owned themes, and renderer boundaries."
siteName="Postkit Journal"
image="/component-preview.svg"
imageAlt="Abstract Postkit editorial artwork"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| hrefRequired | string | None | The destination URL. |
| presentation | "inline" | "card" | "embed" | "media" | "auto" | "card" | The requested link treatment. Auto chooses from resolved metadata. |
| images | "none" | "first" | "carousel" | "first" | How resolved preview images are displayed. |
| media | "auto" | "audio" | "video" | None | The preferred native media type. |
| activation | "click" | "immediate" | "click" | Whether an external interactive embed waits for reader consent. |
| provider | string | None | A provider override for PostkitProvider, an editor, or a build-time resolver integration. |
| metadata | JSON string | None | A normalized @postkit/unfurl result serialized as JSON. |
| title | string | None | An author-supplied title override. |
| headingLevel | "2" | "3" | "4" | "5" | "6" | None | Renders the card title as a heading at this level. Leave it unset and the title is a paragraph, so the preview never breaks the page's heading outline. |
| description | string | None | An author-supplied description override. |
| siteName | string | None | An author-supplied site-name override. |
| image | string | None | An author-supplied primary image override. |
| imageAlt | string | None | Alternative text for the primary image override. |
| favicon | string | None | An author-supplied site icon override. |
| iframeTitle | string | None | An accessible title for a resolved iframe embed. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- anchor
- media
- image
- carousel
- content
- siteRow
- favicon
- siteName
- title
- description
- domain
- embedFrame
- embed
- consent
- consentButton
- mediaPlayer
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroHydrated
- Web components @postkit/elementsPlanned