← All elements
<table class="pc"><thead><tr><th></th><th>Free</th><th class="hot">Pro</th></tr></thead><tbody><tr><td>Elements</td><td>10</td><td class="hot">All</td></tr><tr><td>Support</td><td>-</td><td class="hot"><i></i></td></tr><tr><td>Export</td><td>-</td><td class="hot"><i></i></td></tr></tbody></table>About this card
A feature comparison grid with a highlighted recommended column, ticks drawn with CSS and a hover row highlight.
How it works
A real table compares two plans, and the Pro column cells share a class that gives them a tinted background, with a stronger header, to highlight the recommended choice. The ticks are drawn with a small element that has two borders rotated by minus 45 degrees. Row hover lightens the cells.
Ways to customise it
- Change the purple highlight colours.
- Add a row by copying a tr.
- Replace the tick with text such as Yes for stricter accessibility.
Good to know
Use text such as Included next to ticks for screen readers, because a CSS-drawn tick has no meaning for them. Keep the table headers as th elements.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.