# Components

> Columns, cards, gauges and tooltips — without an import, without a script.

<Skill name="Module progress" level={100} color="#10b981">
  Lesson 2 of 2 — the last one of this module.
</Skill>

## A comparison, in columns

A page that compares two ways of working reads better side by side:

<Columns>
  <Column span={6}>
    <Card style={{ height: '100%' }}>
      <CardHeader>A list written by hand</CardHeader>
      <CardBody>Goes stale at the first page renamed. Nothing tells you.</CardBody>
    </Card>
  </Column>
  <Column span={6}>
    <Card style={{ height: '100%', borderColor: 'var(--dp-accent)' }}>
      <CardHeader>A grid of cards</CardHeader>
      <CardBody>Built from the pages on every build. It cannot go stale.</CardBody>
    </Card>
  </Column>
</Columns>

## A dashboard, in gauges

Where a team tracks the state of its documentation:

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
  <Skill name="Pages reviewed" level={82} shape="circle" />
  <Skill name="Examples tested" level={95} shape="circle" color="#10b981" />
  <Skill name="Translated" level={40} shape="circle" color="#f59e0b" />
</div>

## A warning the reader cannot walk past

Some sentences must not be read as prose. An admonition lifts them out:

<Admonition type="tip">
  Write the lesson before the reference. A reader arrives with a task, not with a list of options.
</Admonition>

<Admonition type="danger" title="Before deleting a version">
  Its address stops answering, and the links pointing at it lead nowhere.
</Admonition>

### Kinds this site added

Six kinds ship with the tool; these two are declared in the configuration of
this very site, with a mark taken from an icon set:

<Admonition type="copilot">
  A passage drafted with an assistant, then read and corrected by a person. The reader is told which
  is which.
</Admonition>

<Admonition type="claude">
  The same, and the page keeps its author: the byline above names a person, not a tool.
</Admonition>

```js
// docpensieve.config.mjs
admonitions: {
  claude: { label: 'Claude', tone: 'info', icon: 'simple-icons:claude' },
},
```

The mark is placed in the page when the site is built, like every other icon
here: your reader downloads nothing, and no request leaves their browser.

## A term, explained in place

A reader who does not know what a <Tooltip text="A version published before the stable one, to try what is coming.">beta</Tooltip> finds out without leaving the sentence — with the mouse or from the keyboard.

## Check yourself

<details>
<summary>How many scripts does this page load?</summary>

None. Every component here is rendered when the site is built.

</details>

<Card href="/versions/beta/components/">
  <CardBody>
    This lesson uses **Columns**, **Card**, **Skill**, **Tooltip** and **Admonition**.
  </CardBody>
</Card>

## Well done

You have finished **Writing well**. The site holds real pages now; the next
module makes it look and move like yours.

<Card href="/versions/beta/examples/making-it-yours/" elevated>
  <CardHeader>Next module: Making it yours</CardHeader>
  <CardBody>Colours, navigation, and blocks that stop a reader in time.</CardBody>
</Card>