KeyTakeaway. Readers who skim still leave with the point.
- Article structure
- Static
- Stability · Initial
- :::postkit-key-takeaway
Usage. Write the points the way you'd jot them down.
<KeyTakeaway
eyebrow="In short"
title="What ships in 0.3"
items='["Definitions outside any framework","Headless React views","Chakra as its own package"]'
/>Use items when the points are short and parallel; write a body when one
needs a link or emphasis. In Prismark the items open as a list in the
Components panel.
Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Key takeaway" | The takeaway heading. |
| eyebrow | string | None | A short label above the heading. |
| items | JSON string | None | A JSON array of takeaway bullets. |
| 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>
- eyebrow <p>
- title <p>
- body
- list <ul>
- item <li>
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned
Accessibility. A summary should read like one.
- Items render as a real list, so assistive technology announces how many points there are.
- Keep the eyebrow to a word or two; it's a label, not the point.
- Text keeps at least 4.5:1 contrast in every variant.