# 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.

Block · With a Pass · https://tactileui.dev/blocks/spec-sheet

> 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

Data sheet table, Lamp lit or unlit per feature, Amber lamp for part, Lifted column strip, Sticky plan heads, Money from minor units, Period selector, Two at a time on phone, Depth tokens for volumes, Container query layout, Finish following

## Usage notes

The plan comparison on a pricing page, or two products compared line by line. One real table: the plans across the top with their prices (minor units, set with the kit’s money helpers), the features down the side in groups. A yes is a lit lamp, a no the same lamp unlit, a part an amber lamp with its words, anything else printed. One plan is lifted as a raised strip with a tag in words and the one contrast key. On a long table the plans’ heads stick to the top of the view. Monthly or yearly from a selector. On a phone it compares two at a time, chosen with two selectors that swap when they meet. No colour fills; no image; every finish of the kit and both volumes.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Printed small above the heading. Empty leaves it out. |
| title | text | Heading |
| lead | text | Sentence |
| plans | number | How many side by side, 2 to 4. A phone compares two at a time. |
| featured | enum | Its column stands raised with a tag in words, and its key is the one contrast key. |
| rows | enum | Every line, or the core ones. On a long table the plans’ heads stick to the top. |
| currency | enum | Prices are set with the kit’s money helpers: grouped, full decimals, the symbol first. |
| period | enum | Monthly or yearly; the visitor changes it with the keys. |
| sheet | text | Printed in the title block. |
| issued | text | The date in the title block. |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |
| volume | enum | Auto follows the nearest data-volume on the page. Quiet draws hairlines where Tactile draws depth. |

## Methods

- update
- destroy

## States

1. **At rest**: Nothing runs.
2. **Lamps**: Lit green: the plan has it. Unlit, the same lamp dark in its bezel: it does not. Amber with words: it has it in part. A screen reader hears Included, Not included or In part.
3. **Lifted**: The lifted plan’s column is one raised strip from its head to its foot, tagged “Chosen most”, with the one contrast key.
4. **Yearly**: The Yearly key sets every price to a month paid yearly, with the year’s total under it; sps-period fires.
5. **Long table**: 
6. **Phone**: 
7. **Finishes and volumes**: On a page with the kit’s finish tokens it is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system.

## How it works

Original composition. Tallyroll, its plans, prices and features are sample copy, invented, and the preview says so. Prices are minor units set with the kit’s moneyText when the page has the kit (the preview hands it in), otherwise by the same rules in the block. The sheet and lamps are CSS drawn here, in the kit’s tokens; no image.