# Comparison

Comparison: a free component, built on your design tokens, to use when someone is choosing between a few fares, plans or memberships and wants the differences in one view. Two to four options side by side: each with its name, price and a Choose button, then one row per attribute so the differences line up.

Prompt: Add the OpenDesigner component comparison to this project: https://opendesigner.dev/library/comparison.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: recommended option, included, not included, hover, focus, disabled, scrolls sideways on a phone.

Accessibility: A table with a column header per option and a row header per attribute, so each value is read with both; ticks and crosses are decorative and the value is always in words; each Choose button is named with its option.

File: https://opendesigner.dev/library/comparison.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/comparison.json

Download: `curl -fsSLo comparison.html https://opendesigner.dev/library/comparison.html`