# Blocks 51 finished sections of a website, filed by what they are for: heroes, pricing, footers, 404 pages and more. Most are built round one of the objects. Docs · 51 pages · https://tactileui.dev/blocks Every page here is Markdown too: add .md to its address. The whole library as JSON: https://tactileui.dev/catalog.json ## Announcements - [Ticker](https://tactileui.dev/blocks/ticker): An announcement bar made as a ticker-tape window. - [Venue Marquee](https://tactileui.dev/blocks/venue-marquee): A club’s site on the night, under a brass flip-dot marquee. ## Backgrounds - [Fluted Glass Hero](https://tactileui.dev/blocks/fluted-glass-hero): A full-bleed hero over a wall of ribbed glass with one warm lamp drifting slowly behind it. - [Aluminium Plate Hero](https://tactileui.dev/blocks/aluminium-plate-hero): A full-bleed hero on a large brushed aluminium plate. - [Morning Blinds Hero](https://tactileui.dev/blocks/morning-blinds-hero): A full-bleed hero lit by morning light through window blinds: soft-edged bands across a plaster wall with a gentle penumbra, a window bar, a faint warm bounce off the floor, and shadows that shift slightly. ## Bento grids - [Instrument Rack](https://tactileui.dev/blocks/instrument-rack): A bento grid of feature cells made as a rack of machined panels. - [Specimen Case](https://tactileui.dev/blocks/specimen-case): A bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass. ## Calls to action - [Hand Press Launch](https://tactileui.dev/blocks/hand-press-launch): A coming-soon section revealed by a hand. - [Attract CTA](https://tactileui.dev/blocks/attract-cta): A newsletter band whose button is a magnet. ## Clients - [Engraved Client Plates](https://tactileui.dev/blocks/client-plates): “Used in production by…”, as metal name plates. - [Nameplate Wall](https://tactileui.dev/blocks/nameplate-wall): A customers section made as the tenant directory in a lobby: cast aluminium or graphite plates, each as long as its name, with the name in engraved capitals and a small “Since 2021” line, fixed to a board behind a sheet of glass that one slow band of light crosses. ## Comparisons - [Spec Sheet](https://tactileui.dev/blocks/spec-sheet): Plans side by side as a manufacturer’s data sheet: a printed title block, then one table with a lit lamp for what a plan has and the same lamp unlit for what it lacks, one column lifted as a raised strip, the heads stuck to the top of a long table, and two at a time on a phone. ## Contact - [Switchboard](https://tactileui.dev/blocks/switchboard): A contact section made as an operator's switchboard. - [Dispatch](https://tactileui.dev/blocks/dispatch): A contact section made as a desk unit. ## 404 & errors - [Pin 404](https://tactileui.dev/blocks/pin-404): A 404 standing out of a pin board. - [Field 404](https://tactileui.dev/blocks/field-404): A 404 on a sheet of lost steel filings. ## FAQs - [FAQ Index](https://tactileui.dev/blocks/faq-drawer): An FAQ as a card-index drawer. - [Answer Desk](https://tactileui.dev/blocks/answer-desk): An FAQ section made as a help desk: a search field in a recessed well with an LCD that counts the answers that match, topic keys with a lamp for the chosen one, the questions as numbered rows with your words marked, and the answer on a reading panel that asks whether it helped. ## Features - [Cloth-lit Cubes](https://tactileui.dev/blocks/cloth-cubes): A features row of small devices on a desk. - [Patch Bay](https://tactileui.dev/blocks/patch-bay): A rack panel of jacks with a cable hanging from each source. - [Synth Panel](https://tactileui.dev/blocks/synth-panel): A synthesiser’s live front panel. - [Thermostat](https://tactileui.dev/blocks/thermostat): A home-climate section with a glazed ceramic dial. - [Pocket Player](https://tactileui.dev/blocks/pocket-player): A pocket cassette player for your recordings. ## Footers - [Machined Footer](https://tactileui.dev/blocks/machined-footer): A footer made as the bottom panel of a device. - [Colophon](https://tactileui.dev/blocks/colophon): A footer made as the rating plate and the index of a product. ## Galleries - [Light Table](https://tactileui.dev/blocks/light-table): A portfolio gallery made as an edit table: slides in their mounts on opal glass lit from below, the chosen one lifted off it and shown whole in a viewer with its title, place, year and exposure, transport keys and a counter, series keys, and a switch for the table's light. - [Portfolio Iris](https://tactileui.dev/blocks/portfolio-iris): A photographer’s index where every frame is a shutter. ## Heroes - [Impression Hero](https://tactileui.dev/blocks/impression-hero): A studio’s hero on a full-bleed board of brass pins. - [Hi-Fi Volume](https://tactileui.dev/blocks/hifi-volume): An amplifier hero in walnut and brushed brass. - [Speaker Launch](https://tactileui.dev/blocks/speaker-launch): A speaker launch where the product works on the page. - [Dark Hero](https://tactileui.dev/blocks/dark-hero): A dark editorial hero over black ferrofluid. - [Camera Launch](https://tactileui.dev/blocks/camera-launch): A launch hero for a fast prime, where the lens is the Iris. - [Iron Hero](https://tactileui.dev/blocks/iron-hero): A magnetics company’s opening, set like a physics monograph. ## Integrations - [Socket Panel](https://tactileui.dev/blocks/socket-panel): An integrations section made as a panel of sockets, one per service. ## Navigation menus - [Rail](https://tactileui.dev/blocks/rail): A site's top bar made like the front edge of a hi-fi unit. - [Drop Tray](https://tactileui.dev/blocks/drop-tray): A site header whose section keys latch down and drop a recessed tray of pages from under the bar: two printed columns, a line under each page, and a raised plate for the page to see. ## Loading & progress - [Processing State](https://tactileui.dev/blocks/processing-state): A long job’s progress card, crowned by ferrofluid. - [Shutter Preloader](https://tactileui.dev/blocks/shutter-preloader): A studio landing page that loads behind a shutter. - [Upload Vessel](https://tactileui.dev/blocks/upload-vessel): A file-import dialog where the upload fills a beaker. - [Warm-up](https://tactileui.dev/blocks/warm-up): A page preloader made as a row of valves warming up. ## Pricing sections - [Tariff Slide](https://tactileui.dev/blocks/tariff-slide): A pricing section made as a slide rule. - [Pricing Drums](https://tactileui.dev/blocks/pricing-drums): A price printed on brass drums. ## Long reads - [Proof Sheet](https://tactileui.dev/blocks/proof-sheet): A long-read layout set like a journal proof: the essay in one column with its notes in the margin, and a contents plate beside it whose lamps follow the section you are reading, an LCD of minutes left from where you are, and keys for the size of the type. - [Reading Progress](https://tactileui.dev/blocks/reading-progress): A long read with a test tube for a progress bar. ## Stats & KPIs - [Scoreboard](https://tactileui.dev/blocks/scoreboard): A match centre round a flip-dot scoreboard. - [Goal Tally](https://tactileui.dev/blocks/goal-tally): A fundraiser’s total on big printed drums. - [Trip Computer](https://tactileui.dev/blocks/trip-computer): An instrument cluster as a stats band. ## Status boards - [Departures Board](https://tactileui.dev/blocks/departures-board): A departures board of flip-dot lines under an enamel fascia. ## Team sections - [Roll Call](https://tactileui.dev/blocks/roll-call): A team section on a machined roll board beside a light box: a row per person with a staff number, name, role, the year they started and a lamp. ## Testimonials - [Rotary File](https://tactileui.dev/blocks/rotary-file): A testimonials section on a motorised rotary card file: each customer a paper card on the drum, the one in front readable, the ones to come leaning back with their name tabs showing. ## Fundraising - [Crowdfund Flask](https://tactileui.dev/blocks/crowdfund-flask): A fundraiser where the total is honey in a flask.