Callout. Make sure the important part gets read.
- Article structure
- Static
- Stability · Initial
- :::postkit-callout
Usage. Writers use it however they already write.
<Callout title="Keep the content" tone="tip">
Change the renderer without changing the article.
</Callout>Both forms validate against the same definition. A tone that doesn't exist fails the build with the file and line.
type is accepted as an alias for tone, so content written for other
callout syntaxes (such as Prismark vaults) works unchanged:
:::postkit-callout{type="warning"} is the same as tone="warning". tone
is the documented prop, and it wins when both are set. Writing in Prismark? The callout
renders inline and its props open in the Components panel. See
Writing with directives.
Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | None | An optional heading for the aside. |
| tone | "note" | "tip" | "important" | "warning" | "caution" | "note" | The semantic emphasis of the aside. |
| 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.
data-postkit-part, outlined where it sits. Point at a label to isolate its layer, or assemble it back into the component.Every part
- root <aside>
- icon <span>
- content <div>
- title <p>
- body <div>
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned
Accessibility. Colour is never the only signal.
- The tone mark is decorative. Give the callout a title when the tone matters to the reader.
- Body text keeps at least 4.5:1 contrast in every tone and variant.
- In email, the tone becomes a bar and the title stays in the text, so nothing depends on CSS support.