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.

Link here

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.

Link here

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.

Link here

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.

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

Column 1 description cell 1

Column 1 description cell 2

Column 1 description cell 3

Column 2 description cell 1

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

No
No
Yes
Link
Link
Link
  • Header column and row are required
  • Second column
    Link 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.

Link here
  • 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.

File link

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 

bulb-1-alternate
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.

fitness-heart-rate
Praesent porttitor nulla

HRHC desc Proin pretium, leo ac pellentesque mollis. Praesent egestas tristique nibh.

read-home
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