# Content

Formatted code, clipboard actions, step sequences and rich-content elements.

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

## When to reach for it

Render supplied text and highlighted code with consistent reading and copy affordances.

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

## StepSequence

A process rail whose source order, counters and annotations belong to the host.

### Props

- `spec` (required) — `StepSequenceSpec`.

Also accepts: `HTMLAttributes<HTMLElement>`.

## ContentTable

Keeps a rendered article table intact inside a keyboard-scrollable region.

Also accepts: `TableHTMLAttributes<HTMLTableElement>`.

## ExternalLinkMark

### Props

- `children` — `ReactNode` default `'↗'`.

## ClipboardButton

Confirms copying only after the browser accepts the clipboard write.

### Props

- `text` — `string`.
- `getText` — `() => string`. Read the current rendered code at activation, when the host owns highlighting.
- `copyLabel` (required) — `string`.
- `copiedLabel` (required) — `string`.
- `className` — `string`.

## CodePanel

A rendered-code panel for Markdown and MDX, preserving the host's highlighted nodes.

### Props

- `languageLabel` — `ReactNode`. A display label, already mapped from the host highlighter's language id.
- `preProps` — `HTMLAttributes<HTMLPreElement>`.
- `framed` — `boolean` default `true`. False when the host renderer has already supplied an enclosing figure.
- `copyLabel` (required) — `string`.
- `copiedLabel` (required) — `string`.
- `children` (required) — `ReactNode`.

## Example — a documented process

```tsx
import { CodePanel, StepSequence } from '@misoto22/folio/website'

<div className="w-full">
  <StepSequence spec={{ label: 'Publish a reading list', caption: 'Review each step before publishing.', steps: [
    { n: '1', label: 'Collect', note: 'Gather the records.' },
    { n: '2', label: 'Review', note: 'Check titles and links.', anchor: true },
    { n: '3', label: 'Publish', note: 'Share the finished list.' },
  ] }} />
  <CodePanel languageLabel="JavaScript" copyLabel="Copy example" copiedLabel="Example copied">
    <code>{'const readingList = records.filter(record => record.reviewed)'}</code>
  </CodePanel>
</div>
```