206 of 300

Conversion 01

Pricing table

Three plans that align, and digits that roll when the period changes. Monthly and yearly are radio buttons, and the digits roll in CSS with one track per digit.

Known from linear.app and claude.com

  • Radio buttonsThe period is a pair of radio buttons, which gives the arrow keys for free. The marker follows with a lag of 50 ms.
  • SubgridThe cards stand on a subgrid, so name, price, text, list and button align.
  • ComparisonThe comparison has a sticky header and tabular figures.