Badges

Badges are a way to display a small amount of text or an image within a nicely formatted box.

Badge Colors

Class	Description
badgeStandard	This is a basic badge
badgePrimary	This is a badge with the trulia orange used on CTAs
badgeSecondary	This is a badge with the alternate CTA color (Trulia green)
badgeTertiary	This is a badge for a warning or something negative

Sold
For Sale
For Rent
<strong class="badgeStandard">Sold</strong>
<strong class="badgePrimary">For Sale</strong>
<strong class="badgeSecondary">For Rent</strong>

Frames

A frame is a simple border around some content, usually an image but other content can be used as well. The different skin classes generally change the intensity and padding size of the frame.

Small Frame

A small frame using the .polaroid class to include some text along with the image. Note the use of the inline style to set the width. This is one of the only places where that is acceptable...

Here's a little text below the image

<div class="frameSmall">
  <img alt="" src="http://placekitten.com/180/135">
  <div class="polaroid" style='width:180px;'>
    <p class="mvn">Here's a little text below the image</p>
  </div>
</div>

Stacked frame with rotations

  
<div class="frameStacked">
  <img alt="" src="http://placekitten.com/640/480">
</div>

Standard Frame

  
<div class="frameStandard">
  <img alt="" src="http://placekitten.com/640/480">
</div>

Thumbnail Frame

  
<div class="frameThumb">
  <img alt="" src="http://placekitten.com/40/40">
</div>