02:52min
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
Kit part · Numbers
VFD
A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- Element
- <span>
- Needs
- kit.css
- Rules
- display.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
96.4MHz
-12dB
TUNE
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Small · 16px | Default · 28px | Large · 44px |
|---|---|---|---|
| VFD | 96.4 | 96.4 | 96.4 |
Graphite
| Part | Small · 16px | Default · 28px | Large · 44px |
|---|---|---|---|
| VFD | 96.4 | 96.4 | 96.4 |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-vfd | class | on <span> | Near-black glass, cyan-white light with a glow: --tui-vfd-bg and --tui-vfd. |
| .tui-vfd--sm · --lg | class | 16px · 44px | Sizes; the default is 28px. |
| data-ghost | attribute | e.g. "88.8" | The unlit segments, the same width as the value. |
| <small> | element | inside | The unit, printed small and upper case. |
Markup
<span class="tui-vfd" data-ghost="88.8">96.4<small>MHz</small></span>Needs kit.css only, no script. How to install the kit.
Accessibility
- It is text: the value and the unit are read; the ghost is not.
- Light on glass is above 12:1; the glow is decoration on top of that.
How it’s built
The LCD’s span with a different light: a 3px scanline over --tui-vfd-bg, a deep inset shadow, and a two-step text-shadow in --tui-vfd for the phosphor glow. It stays the same in both finishes, as a display does.
Rules
display.rules.mdIn the brain
VFD for frequencies and status screens; the unit goes in a small.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.