PolicyGenius - Style Guide

Comparison Layout

This layout for the Comparison page is too complicated for Hologram to properly handle, because it also depends on background images and other modules (mod-comparison and mod-comparison_header). To see this in action it's better to check out the comparison-layout branch on the Rails app and go to http://localhost:3000/mocks/comparison (that's also the best source when implementing this layout).

Foundation is not used for this layout, because the grid system isn't granular enough to accommodate the (changing) fixed with for the left rail.

Important: To toggle the filters on narrow viewports (mobile), JavaScript needs to be added that toggles the class show-filters on the <body> tag. This does not affect wider viewports.

Suspendisse

In rhoncus orci et

Ut scelerisque

sodales

.mod-comparison_header
    .wrap
      h1 Suspendisse

      h2 In rhoncus orci et

      a.toggle-filters href='#filters' Ut scelerisque

      ul.actions
        li: a.i-phone href='#' Pellentesque
        li: a.i-mail href='#' Donec non

.mod-comparison.layout-comparison
  #filters.filters.layout-filters
    a.back href='#results' Vivamus ultricies augue
    p filters

  #results.results.layout-results
    p sodales