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.
What it is for
The plan comparison on a pricing page, or two products compared line by line.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 7 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe head, the title block (sheet, subject, prices, issued), the plans’ heads with the Monthly selector, who each plan is for with its key, and 23 lines in four groups. Nothing runs.
- LampsLit 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.
- LiftedThe lifted plan’s column is one raised strip from its head to its foot, tagged “Chosen most”, with the one contrast key.
- YearlyThe Yearly key sets every price to a month paid yearly, with the year’s total under it; sps-period fires.
- Long tableThe plans’ heads stick to the top of the view (at --sps-sticky-top) while the lines scroll under them.
- PhoneUnder 720px two plans at a time: Compare and with selectors (44px keys) pick them, the same plan on both sides swaps them, sps-pair fires; the period selector moves above the table; no sideways scroll.
- Finishes and volumesOn 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. Every shadow reads a kit depth token, so the Quiet volume (data-volume="quiet" on the page or the section) draws hairlines; no size, word or lamp changes.
Notes
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.
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. Face: Instrument Sans (SIL OFL 1.1), the kit’s own.
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
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.