Footnotes. The list of notes, each with a way back to its references. Closes the article unless placed.
- Article structure
- Static
- Stability · Initial
- :::postkit-footnotes
Usage.
<Footnotes title="Notes" />Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | JSON string | "Notes" | The list heading. Defaults to "Notes"; false hides it, and the list keeps "Notes" as its accessible name. |
| backlinks | boolean | true | Whether each note links back to its references (↩, then a, b, … for a shared note). |
| marker | "superscript" | "bracket" | "pill" | None | How the reference is marked: a raised number (superscript, the default), [1] on the baseline (bracket), or a filled mark (pill). |
| numbering | "decimal" | "lower-roman" | "lower-alpha" | "symbol" | None | How notes are numbered: decimal (the default), lower-roman, lower-alpha or symbol (*, †, ‡…). React views also take a function. |
| placement | JSON string | None | Where notes appear: end (the default), side, popover or inline, or one per breakpoint ({ "base": "inline", "md": "end", "xl": "side" }). Side falls back to end below sideBreakpoint or when the margin runs out; popover and inline enhance the end list and never replace it. |
| sideBreakpoint | number | None | The viewport width, in px, below which side notes fall back to the end list. Defaults to 1024. |
| scope | string | None | Prefixes the ids (fn-{scope}-1) so several documents on one page never collide; usually the slug. Set by the Markdown tooling. |
| 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
- title
- rule
- list
- item
- number
- content
- backlink
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned