Footnote. A reference mark in the text: a link to its note, numbered by order of first use.
- Article structure
- Static
- Stability · Initial
- :::postkit-footnote
Usage.
<Footnote marker="superscript">
Markdown with directives, or MDX. Both parse to the same portable document.
</Footnote>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| identifier | string | None | The note id from the source ([^id]). Set by the Markdown tooling. |
| index | number | None | The note number, by order of first reference. Set by the Markdown tooling. |
| occurrence | number | None | Which reference to the note this is, from 1. A shared note links back to each as a, b, … |
| references | number | None | How many references a note has, on a note inside Footnotes. Set by the Markdown tooling. |
| 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
- marker
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned