PolicyGenius - Style Guide

Article List

List of articles

 
ul.mod-article-list
  li
    a href='#'
      figure
        img src='holder.js/150x80?auto=yes'
        figcaption
          h3 Proin aliquam tortor
          p In rhoncus orci et ex fermentum
  li
    a href='#'
      figure
        img src='holder.js/150x80?auto=yes'
        figcaption
          h3 Proin aliquam tortor
          p In rhoncus orci et ex fermentum
  li
    a href='#'
      figure
        img src='holder.js/150x80?auto=yes'
        figcaption
          h3 Proin aliquam tortor
          p In rhoncus orci et ex fermentum

Condensed version

 
ul.mod-article-list.condensed
  li
    a href='#'
      figure
        img src='holder.js/120x80?auto=yes'
        figcaption
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.
  li
    a href='#'
      figure
        img src='holder.js/180x80?auto=yes'
        figcaption
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.
  li
    a href='#'
      figure
        img src='holder.js/200x200?auto=yes'
        figcaption
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.
  li
    a href='#'
      figure
        img src='holder.js/300x600?auto=yes'
        figcaption
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.

With Tag

 
ul.mod-article-list.condensed
  li
    a href='#'
      figure
        img src='holder.js/120x80?auto=yes'
        figcaption
          .tag Donec dui est
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.
  li
    a href='#'
      figure
        img src='holder.js/120x80?auto=yes'
        figcaption
          .tag Phasellus
          h3 Suspendisse molestie vel sapien at posuere
          p Proin pharetra felis et odio porttitor, et egestas tortor laoreet.

Grid

div style='max-width: 960px'
  ul.mod-article-list.condensed.grid
    li
      a href='#'
        figure
          img src='holder.js/120x60?auto=yes'
          figcaption
            .tag Donec dui est
            h3 Suspendisse molestie vel sapien at posuere
    li
      a href='#'
        figure
          img src='holder.js/120x60?auto=yes'
          figcaption
            .tag Phasellus
            h3 Suspendisse molestie vel sapien at posuere
    li
      a href='#'
        figure
          img src='holder.js/120x60?auto=yes'
          figcaption
            .tag Donec dui est
            h3 Suspendisse molestie vel sapien at posuere
    li
      a href='#'
        figure
          img src='holder.js/120x60?auto=yes'
          figcaption
            .tag Phasellus
            h3 Suspendisse molestie vel sapien at posuere