NextSteps
The hand-written "Next steps" block that ends a guide.
Next steps
Related
View code
<NextSteps
title="Next steps"
id="next-steps"
items={[
{ title: "Route alerts", href: "/docs/alerts", description: "Page the person on call instead of the whole team." },
{ title: "Publish a status page", href: "/docs/status-pages", description: "Tell customers what is down before they ask." },
{ title: "Invite your team", href: "/docs/team", description: "Share monitors and on-call duty." },
]}
/>
<NextSteps variant="list" title="Related" items={items} />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 { NextSteps } from "@sdxc/ui/docs";Renders the titled block, named by its heading. The heading takes level, else the
ambient HeadingScope level, else <h2>; each item is one whole-card or whole-row link.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | |
id | string | No | Id of the heading, so a table of contents can link to the block. |
level | HeadingLevel | No | Heading level; defaults to the ambient HeadingScope level, else DEFAULT_LEVEL. |
items | Item[] | Yes | Two to four destinations, in the order a reader should consider them. |
variant | "cards" | "list" | No | Defaults to DEFAULT_VARIANT. |
Also accepts everything in Omit<TagProps<"section">, "children" | "title" | "id">.
Types
| Name | Values | What it decides |
|---|---|---|
Variant | "cards" | "list" | cards tiles the links in an auto-fitting grid; list runs them down a ruled list. |