Editor's pick
The Independent Publisher's Field Notes
A compact notebook for planning durable stories.
ProductCard. A product or recommendation card with explicit commercial linking.
- Publishing
- Static
- Stability · Initial
- ::postkit-product-card
Usage.
<ProductCard
title="The Independent Publisher's Field Notes"
description="A compact notebook for planning durable stories."
href="#component-preview"
imageSrc="/component-preview.svg"
imageAlt="Abstract cover artwork"
price="$18"
rating={4.5}
badge="Editor's pick"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | string | None | The product name. |
| hrefRequired | string | None | The product destination. |
| description | string | None | The product summary. |
| actionLabel | string | "View product" | The product action label. |
| imageSrc | string | None | The product image URL. |
| imageAlt | string | None | Alternative text for the product image. |
| price | string | None | The displayed price. |
| rating | number | None | A five-point rating. |
| badge | string | None | A short product badge. |
| rel | string | "sponsored" | The link relationship, normally sponsored. |
| 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
- image
- content
- badge
- title
- description
- rating
- footer
- price
- action
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned