Website
SiteShell
Page landmarks, footer groups and shared section headings.
Usage
When to reach for it
Compose the document shell while the host supplies routing links and content.
Ships from@misoto22/design/website
import { SiteShell } from '@misoto22/design/website'Notes
One main landmark, a keyboard skip link, and the publication's common shell.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
footer destinations
A publication footer groups supplied links into named navigation regions. The host owns each destination; the component owns spacing and hierarchy.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
SiteFooter
A quiet footer with semantic, independently named destination groups.
| Prop | Type | Default | Description |
|---|---|---|---|
| brandrequired | ReactNode | — | |
| copyrightrequired | ReactNode | — | |
| groupsrequired | SiteFooterGroup[] | — | |
| colophon | ReactNode | — | |
| contact | ReactNode | — | |
| description | ReactNode | — |
SiteSectionHeading
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | — | |
| subtitle | string | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
SiteLink
Styling for a host router's link without owning its destination.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactElement | — | |
| className | string | — | |
| variant | 'text' | 'back' | 'meta' | 'text' | — |