Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Contents

Group headings are section headers: ink, semibold, a hairline beneath. Items are mono eyebrows in ink-mid; the current one and hover print in the accent. No borders on items.

HANDLE
contents
LIVES IN
src/components/SystemShell.jsx (Contents) · .contents-* in src/index.css
USED ON
System pages, left column (a drawer below lg)
PROPS
pathname (marks the current item) · onPick. A search field at the top filters by name, handle, and group; Enter opens the first match
EXAMPLE
LIVE

As it renders.

CODE
COPY AND PASTE

How it is called.

JSX
import { Contents } from '../components/SystemShell.jsx'

<Contents pathname={pathname} />   {/* search field at the top; Enter opens the first match */}

// index.css: one class per role
<nav aria-label="System contents">
  <div className="contents-group">
    <div className="contents-heading">CHROME</div>
    <ul>
      <li><Link className="contents-item is-active">MASTHEAD</Link></li>
      <li><Link className="contents-item">RAIL</Link></li>
    </ul>
  </div>
</nav>
RULES

What must stay true.

Group headings are section headers: ink, semibold, a hairline beneath. Items are mono eyebrows in ink-mid; the current one and hover print in the accent. No borders on items.