Device. A screenshot in a plain iPhone, iPad or Mac frame drawn with CSS, with an optional caption.
- Media
- Static
- Stability · Experimental
- ::postkit-device
Usage.
<Device
kind="iphone"
src="/component-preview.svg"
alt="Abstract Postkit editorial artwork on a phone screen"
caption="A screenshot in a plain, CSS-drawn frame."
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "iphone" | "ipad" | "mac" | "iphone" | The device frame: iphone (with a notch), ipad, or mac (a laptop with its base). |
| srcRequired | string | None | The screenshot URL. |
| altRequired | string | None | Alternative text that describes what the screenshot shows. |
| caption | string | None | Visible supporting text below the device. |
| 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
- frame
- notch
- screen
- image
- base
- figcaption
- number
- caption
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned