Small Tabs › Style Guide

Listing Rollup

Listing rollups are a results microformat that display a bar's daily special. Their role is to quickly communicate the bar's location, specials and bar type in an easily scannable manner.

<article class="rollup">
  <div class="rollup-pin"></div>
  <h1 class="rollup-title"><a href="#">Jack & Gingers</a></h1>
  <p class="rollup-address">
    2048 W Armitage Ave,
    <a href="#">Bucktown</a>
  </p>
  <ul class="rollup-list">
    <li class="rollup-list__drink">$4 Bloody Marys, $4 Mimosas, $2 Domestic Drafts, $10 Domestic Pitchers</li>
    <li class="rollup-list__food">$6 Nachos, $6 Quesadillas</li>
    <li class="rollup-list__category"><a href="#">Sports Bar</a>, <a href="#">Night Club</a></li>      
  </ul>
</article>