# Colophon

A footer made as the rating plate and the index of a product. An engraved plate with the model, the serial and the specification, a contents-page index with leader dots, a five-detent rotary switch for language and region, a service lamp and a top key.

Block · With a Pass · https://tactileui.dev/blocks/colophon

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Engraved rating plate, Generated serial bars, Manual index with leaders, Native radio rotary switch, Detent snap by pointer angle, Region swaps legal entity, Status lamp with words, Back to top key, Container query layout, Finish following

## Usage notes

The footer of a product that wants to read as an object with a manual: developer tools, infrastructure, hardware-adjacent software. Where the Machined Footer is the bottom panel of a device, this is the plate riveted to its back and the contents page of its manual. It carries what a footer carries (every link, the legal line, a way back to the top) and what these products want there: the model, serial and rated specification cut into metal, the region chosen on a rotary switch that swaps the legal entity and fires clo-region for your routing, and a service lamp with its words. CSS and a little DOM, no dependency, both finishes.

## Options

| Option | Type | Description |
| - | - | - |
| brand | text | Engraved large on the plate, with the product beside it. |
| product | text | Product |
| tagline | text | Tagline |
| model | text | Model |
| designed | text | Designed in |
| serial | text | The bars under the specification are drawn from it. |
| year | number | For the legal line. |
| region | enum | Where the rotary switch starts. Choosing fires clo-region, and swaps the legal line. |
| service | enum | Off leaves the lamp out. Call setService() from your status feed. |
| backToTop | boolean | Back-to-top key |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

- setService
- setRegion
- update
- destroy

## States

1. **At rest**: The engraved plate with its four screws and serial bars; the index in two columns of four numbered sections; the switch at the configured region; a green service lamp; nothing runs.
2. **Switch turned**: 
3. **Switch dragged**: A pointer or finger on the dial snaps the knob to the nearest detent as it moves; the gap at the bottom belongs to its nearer end.
4. **Service degraded**: The lamp turns amber and the words read “Service degraded”; the line is role=status, so the change is announced. Outage is red.
5. **Service off**: The lamp and its words are left out.
6. **Link hover**: The title underlines and the leader dots darken.
7. **Key pressed**: 
8. **Tablet**: The plate above, its two halves side by side; the index below in two columns; the key on its own row.
9. **Phone**: 
10. **Reduced motion**: The knob and the key move without transitions; everything else is unchanged.

## How it works

Original composition. The plate, bars, dial and knob are CSS and SVG drawn here, in the kit's tokens; no image.