PolicyGenius - Style Guide

Comparison Table Header

Usage notes:

You can hide columns/sections on small using the .col-hide-for-medium-only class. However, note that you will need to add the class to the corrisponding card column/section if there is one.

Comparison Table Header examples with compare cards are found here.

Base example

Phasellus
Nullam metus
Aenean sit
Aliquam
.mod-comparison-table-header
  .section.plan-col
    | Phasellus
    span.i-directup
  .section
    | Nullam metus
    span.i-dropdown
  .section.col-hide-for-medium-only
    | Aenean sit
    span.i-dropdown
  .section
    | Aliquam
    span.i-dropdown
  .section.cta-col

Light example

Phasellus
Nullam metus
Aenean sit
Aliquam
.mod-comparison-table-header.light
  .section.plan-col
    | Phasellus
    span.i-directup
  .section
    | Nullam metus
    span.i-dropdown
  .section.col-hide-for-medium-only
    | Aenean sit
    span.i-dropdown
  .section
    | Aliquam
    span.i-dropdown
  .section.cta-col

Bordered example with compare spacer

Phasellus
Nullam metus
Aenean sit
Aliquam
.mod-comparison-table-header.bordered.with-compare
  .compare-col-spacer
  .section.plan-col
    | Phasellus
    span.i-directup
  .section
    | Nullam metus
    span.i-dropdown
  .section.col-hide-for-medium-only
    | Aenean sit
    span.i-dropdown
  .section
    | Aliquam
    span.i-dropdown
  .section.cta-col