MUSIC ON

Elements

Prototyping and production requires more than just navigation or tabs or typography. We’ve created a number of additional elements to help rapidly prototype, and like everything else they are production-ready and easy to restyle or override.

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like everything else in Foundation, easy to customize.

  • This is a warning alert (div.alert-box).×

    This is a success alert (div.alert-box.success).×

    This is an alert (div.alert-box.alert).×

    This is a secondary alert (div.alert-box.secondary).×

  • 
    
    <div class="alert-box">
    
      This is a warning alert (div.alert-box).
    
      <a href="" class="close">&times;</a>
    
    </div>
    
    <div class="alert-box success">
    
      This is a success alert (div.alert-box.success).
    
      <a href="" class="close">&times;</a>
    
    </div>
    
    <div class="alert-box alert">
    
      This is an alert (div.alert-box.alert).
    
      <a href="" class="close">&times;</a>
    
    </div>
    
    <div class="alert-box secondary">
    
      This is a secondary alert (div.alert-box.secondary).
    
      <a href="" class="close">&times;</a>
    
    </div>
    
    
  • 
    
    
    Text
    Text
    Text
    Text

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.

  • Types

    Normal Label

    Secondary Label

    Success Label

    Alert Label

    Styles

    Regular Label

    Radius Label

    Round Label

     

    Example Label This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.

  • 
    
    <!-- Types -->
    
    <span class="label">Normal Label</span>
    
    <span class="secondary label">Secondary Label</span>
    
    <span class="success label">Success Label</span>
    
    <span class="alert label">Alert Label</span>
    
    <!-- Styles -->
    
    <span class="label">Regular Label</span>
    
    <span class="radius label">Radius Label</span>
    
    <span class="round label">Round Label</span>
    
    

Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.foundation.tooltip.js plugin. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

  • Example in text below

    The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” of the target element. On a small device, the tooltips are full width and bottom aligned.

  • 
    
    <span class="has-tip" data-width="210" title="Bottom and the default position.">"tip-bottom"</span>
    
    <span class="has-tip tip-top noradius" data-width="210" title="Top and not rounded!">"tip-top"</span>
    
    <span class="has-tip tip-left" data-width="90" title="left!">"tip-left"</span>
    
    <span class="has-tip tip-right" data-width="90" title="right!">"tip-right"</span>
    
    

Panels

A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. There are two styles built in, and they support a class of .radius to round them off.

  • This is a regular panel.

    It has an easy to override visual style, and is appropriately subdued.

    This is a callout panel.

    It’s a little ostentatious, but useful for important content.

  • 
    
    <div class="row">
    
      <div class="six columns">
    
        <div class="panel">
    
          <h5>This is a regular panel.</h5>
    
          <p>It has an easy to override visual style, and is appropriately subdued.</p>
    
        </div>
    
      </div>
    
      <div class="six columns">
    
        <div class="panel callout radius">
    
          <h5>This is a callout panel.</h5>
    
          <p>Content...</p>
    
        </div>
    
      </div>
    
    </div>
    
    

Inline Lists

When you just need a horizontal list of links, like in a footer, and you want more control than just spaces between them you can use this simple construct.

  • 
    
    <ul class="inline-list">
    
      <li><a href="#">Link 1</a></li>
    
      <li><a href="#">Link 2</a></li>
    
      <li><a href="#">Link 3</a></li>
    
      <li><a href="#">Link 4</a></li>
    
      <li><a href="#">Link 5</a></li>
    
    </ul>
    
    

Image Thumbnails

If you are going to use an image as an anchor, we’ve got you covered. All you’ve gotta do is wrap an a.th around your image and viola!

  • 
    
    <a href="#" class="th"><img src="http://placehold.it/350x200"></a>
    
    

 

Our Partners