# SiteShell

Page landmarks, footer groups and shared section headings.

- Group: Website
- Import: `import { SiteShell } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/site-shell/

## When to reach for it

Compose the document shell while the host supplies routing links and content.

## 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.

## SiteShell

One main landmark, a keyboard skip link, and the publication's common shell.

### Props

- `children` (required) — `ReactNode`.
- `navigation` — `ReactNode`.
- `footer` — `ReactNode`.
- `skipLabel` (required) — `string`.
- `contentId` — `string` default `'main-content'`.

## SiteFooter

A quiet footer with semantic, independently named destination groups.

### Props

- `brand` (required) — `ReactNode`.
- `contact` — `ReactNode`.
- `description` — `ReactNode`.
- `groups` (required) — `SiteFooterGroup[]`.
- `copyright` (required) — `ReactNode`.
- `colophon` — `ReactNode`.

## SiteSectionHeading

### Props

- `title` (required) — `string`.
- `subtitle` — `string`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## SiteLink

Styling for a host router's link without owning its destination.

### Props

- `children` (required) — `ReactElement`.
- `variant` — `'text' | 'back' | 'meta'` default `'text'`.
- `className` — `string`.

## Example — footer destinations

```tsx
import { SiteFooter, SiteLink } from '@misoto22/folio/website'

<SiteFooter
  brand="Field Notes"
  description="An independent journal of design and observation."
  groups={[
    { id: 'read', label: 'Read', items: [
      { id: 'essays', content: <SiteLink><a href="#essays">Essays</a></SiteLink> },
      { id: 'index', content: <SiteLink><a href="#index">Archive</a></SiteLink> },
    ] },
    { id: 'about', label: 'About', items: [
      { id: 'studio', content: <SiteLink><a href="#studio">The studio</a></SiteLink> },
    ] },
  ]}
  copyright="© 2026 Field Notes"
  colophon="Set with care."
/>
```