Sample Comparison Components
Comparison Components
There are three types of comparison components: Cards, Comparison Chart and Chart Light. All comparison components need to be put in full one-column sections.
Comparison Cards
Two to three comparison cards are recommended in a set. Height is not equalized across the cards so it is recommended to write equal-length copy for best display.
Comparison Card 1
Vivamus euismod mauris. Nam at tortor in tellus interdum sagittis. Nulla porta dolor. Vivamus consectetuer hendrerit.
Comparison feature 1-1
Vivamus euismod mauris.
Comparison feature 2-2
Vivamus am at tortor.
Comparison Card 2
Praesent venenatis metus at tortor pulvinar varius. Duis vel nibh at velit scelerisque suscipit. Nulla porta dolor.
Comparison feature 1-1
Praesent venenatis metus.
Comparison feature 2-2
Praesent venenatis metus.
Comparison Card 3
Praesent egestas tristique nibh. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
Comparison feature 3-1
Pellentesque eu, pretium quis, sem.
Comparison feature 3-2
Donec orci lectus, aliquam ut, faucibus.
Vestibulum ullamcorper mauris at ligula
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Vestibulum ullamcorper mauris at ligula
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Nullam tincidunt adipiscing enim. Ut non enim eleifend felis pretium feugiat. Aliquam lobortis.
Anatomy of Comparison Cards
- Heading (optional)
- H2
- Description (optional)
- no character limit
- Comparison card
- 2-3 cards permitted
- Card heading (optional)
- max of 50 characters recommended
- Card description (optional)
- max of 160 characters recommended
- Comparison Feature
- fewer than 10 features is recommended
- Feature Heading (optional)
- max of 32 characters recommended
- Feature Description
- max of 34 characters recommended
- Link (optional)
- multiple links permitted
- file and URL links permitted
Comparison Chart
Comparison charts can be configured in numerous ways by using text cells, link cells and yes/no cells. The number of rows and columns is flexible and header cells are optional. Height is not equalized across columns so it is recommended to write equal-length copy.
-
Column 1 header
-
Column 2 header
-
Column 3 header
-
Column 4 header
-
Column 5 header
-
Header column and row are required
-
Second columnLink optional
-
Column three
Describe row one
Describe row two
Describe row three
- Vestibulum volutpat pretium libero.
- Phasellus gravida semper nisi.
- Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis.
- Phasellus tempus.
- Nulla porta dolor.
Sed mollis eros et ultrices. Phasellus tempus. Pellentesque dapibus hendrerit tortor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
- Nulla consequat massa quis enim. Maecenas egestas arcu.
- Proin magna. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.
- In hac habitasse platea dictumst.
- Curabitur a felis in nunc fringilla tristique. Mauris sollicitudin fermentum libero.
- Curabitur nisi. Aliquam erat volutpat.
Curabitur a felis in nunc fringilla tristique. Maecenas egestas arcu quis ligula mattis placerat.
Cells are not equal height
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat.
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
Yes
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
No
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
Magna amet sit, ultricies pulvinar ultricies amet ullamco, ultricies sed tempuribud providerent fugiat eu fugiat ullamco adipiscing ex ullamco nostrud ultricies.
You could put links on text.
Voluptate ut sed fugiat dignissim, nisi sit duis eu tempor velaliquam.
Comparison chart - large
-
30 characters. Sed magna purus
-
40 characters. Sed magna purus maecenas.
-
Column 3 header
-
45 char. Sed magna purus, fermentum tincidunt
-
Column 5 header
-
Column 6 header
90 characters. Praesent nonumm in odio. Sed magna purus fermentum eu, tincidunt varius ut.
Column 1 description cell 2
Column 1 description cell 3
140 char. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Fusce fermentum. Class aptent taciti sociosqu ad litora torquen.
Column 2 description cell 2
Column 2 description cell 3
Column 3 description cell 1
Column 3 description cell 2
Column 3 description cell 3
Praesent nonummy mi in odio. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Vestibulum ullamcorper mauris at ligular. Vivamus laoreet.
Sed magna purus, fermentum tincidunt eu praesent asemegetest
Sed fringilla mauris sit amet nibh. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Sed hendrerit.
No
No
Yes
Comparison Light
Header cell 1
Header cell 2
Header cell 3
Header cell 4
Header cell 5
Row group 1
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Cras non dolor. Nunc nulla. Maecenas nec odio et ante.
Row two Nam pretium turpis et arcu. Cras sagittis.
Row 2 Praesent vestibulum dapibus nibh. Donec orci lectus, aliquam.
Row two Donec orci lectus, aliquam ut, faucibus non, euismod.
Row two Phasellus magna.
Row two Vivamus laoreet. Phasellus gravida semper nisi.
Row 2 header cell
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Donec vitae sapien ut libero venenatis faucibus. Praesent ut ligula non mi varius sagittis. Aliquam lobortis.
Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.
Comparison Light with icons
Phasellus nec sem
HRHC desc Proin pretium, leo ac pellentesque mollis. Praesent egestas tristique nibh.
Nullam accumsan lorem
R1HC desc Phasellus nec sem in justo pellentesque facilisis. Donec id justo.
Praesent porttitor nulla
HRHC desc Proin pretium, leo ac pellentesque mollis. Praesent egestas tristique nibh.
Phasellus gravida semper
HRHC desc Proin pretium, leo ac pellentesque mollis. Praesent egestas.
Row one cell one description
Row one cell two
Row one cell three
Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Etiam vitae tortor.
Row two cell one
Row two cell two
Row two cell three
Row two cell four
Cell one, row 3
cell 1, row 4
cell 2, row 4
Standard table
| Tempuribud eros sed | Eu urna ut nunc commodo tempor nostrud, eu quis nisi doming providerent tempuribud fugiat esse dolor tempor adipiscing | Amet pulvinar. Pariatur eu amet exercitation nisi. | Pariatur eu amet exercitation nisi harmud suscipit ultricies. | Consequat suscipit | |
|---|---|---|---|---|---|
| voluptate sed exercitation | Consequat suscipit sed tempuribud fugiat nunc adipiscing nisi. | Consequat | tempuribud | ||
| commodo tempor | Velaliquam nunc, dignissim ullamco esse consectetur tempuribud voluptate in nulla. | ||||
| Doming consectetur | ta | freakin | da | . | |