# Company blog · The Gantry Bulletin

A company blog for a CI service set as a broadsheet front page: a masthead with the issue and the date, a lead story with its figure on LED bars, the next three in a ruled column, most read, a newsletter plate, and the archive paged by a thumbwheel. A story opens in a drawer, so the front page stays where it was. Loading, empty, error and offline states included.

Template · With the Kit · https://tactileui.dev/templates/bulletin

> The code and styling for this template come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
- [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.
- [LED bar chart](https://tactileui.dev/parts/ledbars): A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value.
- [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Page wheel](https://tactileui.dev/parts/page-wheel): Pagination as a thumbwheel. A knurled wheel stands in a recess with a window in its face, and the page number rolls past it on a paper tape. A key either side steps by one. The keys are plain links, so it pages without any script; the wheel is what a script adds.
- [Drawer](https://tactileui.dev/parts/drawer): A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by.
- [Scroll area](https://tactileui.dev/parts/scroll-area): A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it. Scrolling itself is the browser’s own.
- [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
- [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work.
- [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action.

## Usage notes

Bar with a sample tag · a masthead: issue and date on a rule, the name at display size, a double rule, the desks as a segmented control and a search combo · the front: the lead story with a standfirst, a byline coin and a figure on LED bars, beside three stories in a ruled column · a band: most read with big numerals, the changelog, a newsletter panel · earlier stories as ruled rows, paged by a page wheel · a story in a drawer from the right (#story/…) · a key at the foot that shows the other states (?state=).