# Panel

A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.

Kit part · Free · https://tactileui.dev/parts/panel

- Element: `<div>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Cards & panels
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Plain panel

```html
<div class="tui-panel" style="width:200px"><p style="margin:0">A face plate. 20px in, 12px corners.</p></div>
```

### With a head

```html
<div class="tui-panel" style="width:220px"><div class="tui-panel__head"><span class="tui-label">Battery</span><span class="tui-tag"><span class="tui-lamp" data-lamp="amber" data-on></span>Charging</span></div><span class="tui-readout__value">78<small>%</small></span></div>
```

### Screws · device panels only

```html
<div class="tui-panel tui-panel--screws" style="width:200px"><p class="tui-label" style="margin:0">Receiver</p><p style="margin:8px 0 0">24px in, four slotted screws.</p></div>
```

## Every state

- Face
- Head
- Screws

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-panel | class | — | A face plate: --tui-face, 20px padding, 12px radius, the raised light and the bead-blast grain. |
| .tui-panel--screws | class | — | Four slotted screws in the corners and 24px padding. For device-like panels only. |
| .tui-panel__head | class | — | A row: label on the left (it grows), a status or one small key on the right, a hairline rule under it. |
| .tui-rule | class |  | A printed hairline between groups on one plate. |
| --tui-grain | CSS property | 0.5 · 0.35 | Opacity of the bead-blast texture. Set by the finish; do not remove it to “clean up”. |
| --tui-noise, --tui-screw | CSS property | SVG data URI | The grain and the screw, as images the panel draws. Read-only. |

## Markup

```html
<div class="tui-panel">
  <div class="tui-panel__head">
    <span class="tui-label">Output stage</span>
    <span class="tui-status"><span class="tui-lamp" data-on></span>Running</span>
  </div>
  <div class="tui-tray">
    <button class="tui-key">Mute</button>
    <button class="tui-key">Solo</button>
  </div>
</div>
```

The demo on the page:

```html
<div class="tui-panel" style="width:min(100%,380px)">
  <div class="tui-panel__head"><span class="tui-label">Output stage</span><span class="tui-status"><span class="tui-lamp" data-on></span>Running</span></div>
  <p style="margin:0 0 14px" class="tui-muted">A head, a rule, then the parts. The tray below is cut into the plate.</p>
  <div class="tui-tray" style="display:flex;gap:3px"><button class="tui-key" data-latch aria-pressed="false">Mute</button><button class="tui-key" data-latch aria-pressed="true">Solo</button></div>
</div>
```

## Usage notes

Switch the stage to graphite: the same plate becomes soft-touch black.

## Accessibility

- A panel is presentation. If it names a region, use a real heading inside it, or give the element `role="region"` and an `aria-label`.
- The head label is printed text; when it titles the panel, make it a heading element with the `tui-label` class.
- Screws and grain are background images: nothing to announce.

## How it’s built

The face is `--tui-face` with a `::before` carrying an SVG fractal-noise texture at `--tui-grain` opacity (the bead-blast) and the shared raised light: a one-pixel catch light on the top edge and two soft shadows falling down. The screws are one inline SVG, repeated four times in an `::after`, every slot turned the same way. No bitmaps; the noise and the screw are SVG data URIs.

## Rules

One level of panels: a panel holds trays and parts, never another panel.

The full rules are in `panel.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Tray](https://tactileui.dev/parts/tray): A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
- [Grille and cloth](https://tactileui.dev/parts/grille): Perforated metal and speaker cloth, for the place where a real device would breathe or sound.
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.