AnchorHeading
A docs section heading a reader can link to.
View code
<Typeset preset="docs">
<AnchorHeading id="install" linkLabel="Link to Install">Install</AnchorHeading>
<p>Add the package to your Worker.</p>
<AnchorHeading id="configure" level={3} linkLabel="Link to Configure">Configure</AnchorHeading>
<p>Set --ui-docs-scroll-margin to your sticky header's height.</p>
</Typeset>Demo docs sites
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
- Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
- API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
- Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { AnchorHeading } from "@sdxc/ui/docs";Renders the heading with its # link after the text. The link stays in the tab order
at all times, shows on hover of the heading or on its own focus, and shows always on
devices without hover. Jumps clear --ui-docs-scroll-margin (default 5rem).
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Fragment the heading answers to, and the # link's target. |
level | HeadingLevel | No | Defaults to the ambient HeadingScope level, else DEFAULT_LEVEL. |
linkLabel | string | Yes | Accessible name of the # link, such as "Link to Install". |
children | RemixNode | Yes |
Also accepts everything in Omit<TagProps<"h2">, "id">.