Comparison table
The comparison table is a fully responsive and mobile optimized component used to compare 3 or more items by being able to select from a dropdown what 2 items of the set are being compared side-by-side. The component is a great way to compare items like plans or services that have similar data and can be displayed within any page template.
When to use
- For comparing 3 or more items
- For items that have similar data that can be compared
When not to use
- If only comparing 2 items use the tablet component
- If items do not have a shared data structure
Anatomy
- Table heading and description: the heading is required but the description can be optional, this is used to set up and introduce the items available in the comparison chart.
- Select menus: the select menus control what items are showing, they will always be the first row in the comparison table and have a light blue background. The list is configurable with no limit to how many items can be added. Authors can edit the label as well as choose which two items are displayed by default. Once a user selects an item on one side that item is not available to select on the other side to avoid the same item being compared side-by-side.
- Header row: heading rows will contain the title of the data being compared and will always span across both columns and have a light gray background, there is no limit to how many header rows and data can be added.
- Data cell: this will display the content or data based on the header row above for the item selected in that dropdown. The data cell can support text, iconography, links and buttons.
Demos & variations
There is only one variation of the comparison table available. In tablet and mobile the columns of the table compress to still only show 2 columns side-by-side.
Types of eye care doctors and professionals
Generally, there are three types of eye professionals: optometrists, ophthalmologists and opticians. Here’s a breakdown of their training and the services they offer: