Badges

by ritcheyer

HTML

<span class="badge badge-count">50</span>
<span class="badge badge-count badge-biggie">50 (Larger Font)</span>
<hr>
<span class="badge badge-bank-owned">Bank Owned</span>
<span class="badge badge-short-sale">Short Sale</span>
<span class="badge badge-foreclosure">Foreclosure</span>
<span class="badge badge-reduced">Price Reduced</span>
<hr>
<span class="badge badge-new">New</span>

CSS

/* ----------------------------------------------------------

    Title: foundation.css
    
    Description: Within this file, you will find our site(s)-
    wide reset, typography, base widget styling, 
    
    Versions:
     - 0.1 - 2011-03-08 - Initial Creation and Development
     - 0.2 - 2012-02-07 - Adding box-sizing per Paul Irish
    
    Author(s)/Editor(s):
     - Eric Ritchey <[email protected]>
     - Nick Cairns <[email protected]>
     - Jason Burachenski <[email protected]>
    
---------------------------------------------------------- */



/* 1. Reset ------------- */

/* apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    box-sizing:         border-box;
}

/* http://maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased;}

body, div, 
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, pre, code,
form, fieldset, legend, input, button, textarea, blockquote,
table, thead, tfoot, tbody, th, td, caption { margin: 0; padding: 0; }
article, aside, footer, header, hgroup, nav, section {display: block;}

body {
    font: normal 62.5%/1.5 Helvetica, Arial, sans-serif;
    color: #444;
}

iframe  { background-color: transparent; border: 0; }
p       { margin: 0 0 10px 0; font-size: 120%; }
a       { color: #0369b2; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Default Styling for Typographical Goodness */
h1,h2,h3,h4,h5,h6 { margin: 0; } /* explicitly need to setup margin with classes */
h1,h2 { font-weight: normal;}
h4 { font-size: 120%;}
fieldset { border: 0; }
em,i { font-style: normal; }

input[type="text"], select, textarea {
    border: 1px solid #000;
    padding: 2px;
    width: 150px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing:    content-box;
    -ms-box-sizing:    ...