CallToAction. A focused article callout with primary and secondary actions.
- Engagement
- Static
- Stability · Initial
- :::postkit-call-to-action
Usage.
<CallToAction
eyebrow="Ready to publish?"
title="Build a portable article system"
description="Start with the React package and add framework adapters only when you need them."
primaryLabel="Get started"
primaryHref="#component-preview"
secondaryLabel="Read the guide"
secondaryHref="#component-preview"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | string | None | The call-to-action heading. |
| eyebrow | string | None | A short label displayed above the heading. |
| description | string | None | Plain-text supporting copy. |
| primaryLabel | string | None | The primary action label. |
| primaryHref | string | None | The primary action destination. |
| secondaryLabel | string | None | The secondary action label. |
| secondaryHref | string | None | The secondary action destination. |
| alignment | "start" | "center" | "start" | The content and action alignment. |
| 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
- content
- eyebrow
- title
- body
- actions
- primaryAction
- secondaryAction
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned