# DocPage

The documentation page template: the site header, the area navigation, the content and the page index, ready. Whoever uses it only fills in the regions.

## When to use

-   On every page of the Feitio documentation: foundations, development guides, components and templates.
-   On any documentation that follows Feitio, changing only what goes in the regions.

## When not to use

-   **On the site home page:** it is a presentation, with no side navigation and no index.
-   **On a product work screen:** that is the `AppShell`.

## The regions

The template only divides the page. What goes in each region comes in as a property; it builds the rest by itself.

Region

Takes

What for

`area`

`"design"`, `"dev"`, `"comp"`

The site area. Marks the current area in the header.

`sideNav`

the area navigation

The groups and pages of the area, with the current one marked. On the left on wide screens; in the Drawer on mobile.

`crumb`

short text

Where the page sits: the area and the group.

`title`

text

The page title, the only `h1`.

`lede`

one or two sentences

What it is, in one sentence, right below the title.

`children`

the sections

The content: sections with `h2` and, inside, `h3`, each with an `id`. The Anchor comes from them.

`toc`

`true` (default), `false`

Shows the Anchor. Turn it off only on short, single-section pages.

### What comes built in

-   The site header: the areas, Search, language, day and night, and GitHub.
-   On mobile, the Drawer with all of that and the area navigation.
-   The Anchor, built from the `h2` and `h3` with an `id`: on the right on wide screens, in a closed "On this page" on mobile.
-   On wide screens, the navigation column runs down to the footer, with the thin line; the list stays pinned on screen and, when it does not fit, scrolls on its own with its own ScrollFade. The Anchor does the same, without the line.
-   The page ScrollFade, the BackToTop in the bottom right corner, and the footer.

## Widths

-   **Mobile:** one column. The header hides when scrolling down and comes back when scrolling up.
-   **From 64rem:** the area navigation on the left, in a column that runs down to the footer, and the areas in the header.
-   **From 80rem:** the Anchor on the right.
-   **Large screens:** the whole stops at 90rem and stays centered; the content, at 46rem.

## Content rules

-   A single `h1`, the `title`.
-   Every section starts with an `h2` and has an `id`; subsections use `h3`, also with an `id`. Without an `id`, they stay out of the Anchor.
-   Examples go in an `Example`, with its code.
-   Nothing outside the regions: an extra bar in the header, a notice pinned to a corner.

## Code

### React

```jsx
<DocPage
  area="comp"
  sideNav={componentsNav}
  crumb="Componentes, base"
  title="Button"
  lede="Um botão faz uma ação na tela onde está."
>
  <Section id="quando" title="Quando usar">…</Section>
  <Section id="exemplos" title="Exemplos">
    <Example id="ex-principal" title="Principal" code={primarySource}>
      <Button variant="primary">Salvar alterações</Button>
    </Example>
  </Section>
</DocPage>
```

### The HTML it produces

```html
<header class="site-header">…</header>          <!-- automático -->
<div class="site-body has-side has-toc">
  <aside class="site-side">                   <!-- a coluna, até o rodapé -->
    <div class="side-inner">…sideNav…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
  <main class="site-main" id="conteudo" tabindex="-1">
    <p class="crumb">…crumb…</p>
    <h1>…title…</h1>
    <p class="lede">…lede…</p>
    <details class="toc-mobile">…</details>    <!-- automático, dos h2 e h3 -->
    …children…
  </main>
  <aside class="site-toc">                    <!-- automático, dos h2 e h3 -->
    <div class="side-inner">…Anchor…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
</div>
<a class="feitio-button feitio-back-to-top" …>Topo</a>   <!-- automático -->
<span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- automático -->
<footer class="site-footer">…</footer>       <!-- automático -->
```

The [Button](/en/components/button/) page is a page built with this template.