Labels and badges

Composition is used to create labels and badges. Choose a fill for background color.

Default Primary Success Danger Warning Info 42 42
<span class='fill-gray pad0 small quiet round inline'>Default</span>
<span class='fill-blue dark pad0 small round inline'>Primary</span>
<span class='fill-green dark pad0 small round inline'>Success</span>
<span class='fill-red dark pad0 small round inline'>Danger</span>
<span class='fill-yellow pad0 small round inline'>Warning</span>
<span class='fill-light-blue pad0 small round inline'>Info</span>
<span class='fill-purple dark pad0 small img-circle inline'>42</span>
<span class='fill-turquoise dark pad0y pad1x small img-rounded inline'>42</span>

Avatars

Create avatars by using the .img-circle and .img-rounded helpers with a set width.

.img-circle
.img-rounded
<img src='../img/regularshow.jpg' class='img-circle' width='20'>
<img src='../img/regularshow.jpg' class='img-circle' width='32'>
<img src='../img/regularshow.jpg' class='img-circle' width='40'>

<img src='../img/regularshow.jpg' class='img-rounded' width='20'>
<img src='../img/regularshow.jpg' class='img-rounded' width='32'>
<img src='../img/regularshow.jpg' class='img-rounded' width='40'>

Hovercard

Use hovercard for displaying a person's bio or contact information. Information can be made actionable by including links and call to action buttons. Composition is used to create hovercard. Use the grid system or a separate css class to assign a width to its container.

Rigby

Groundskeeper
fired briefly seven times
Call Message
.hovercard { width: 250px; }

<div class='box round center lift contain clearfix hovercard'>
  <div class='row6 fill-blue round-top pin-top'></div>
  <div class='contain space-bottom1 row7'>
    <img src='../img/regularshow.jpg' class='pin-bottom img-circle' width='80'>
  </div>
  <h3>Rigby</h3>
  <h5 class='quiet'>Squarespace</h5>
  <h5 class='quiet'>Creative Director</h5>
  <div class='pad2 space-bottom1'>
    <a href='#fakelink' class='btn btn-primary'>Become</a>
  </div>
  <a href='#fakelink' class='block quiet col-xs-6 pad1y pad2x keyline-top keyline-right fill-light'>
    <i class='icon icon-phone pad0r'></i>Call
  </a>              
  <a href='#fakelink' class='block quiet col-xs-6 pad1y pad2x keyline-top fill-light'>
    <i class='icon icon-envelope pad0r'></i>Message
  </a>              
</div>

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. We loosely based modal on Bootstrap and customized its animation to be quick and subtle. On smaller devices modal becomes fullscreen.

Launch modal
<a href='#fakelink' class='btn btn-primary' data-toggle='modal' data-target='#modal'>
  Launch modal
</a>          

<div id='modal' class='animate modal'>
  <div class='modal-dialog'>
    <form method='post' class='container-fluid'>
      <div class='col-sm-6 col-xs-12 fill-blue modal-content contain'>
        <div class='dark'>          
          <a href='#fakelink' class='quiet pin-right close' data-dismiss='modal'>
            <i class='icon icon-remove'></i>
          </a>
          <div class='pad2y pad4x center'>
            <h3>Sign in to Paddle</h3>
          </div>
          <div class='space-bottom2 pad4x'>
            <fieldset>
              <label>Username or email</label>
              <input type='text' class='stretch'>
            </fieldset>
            <fieldset>
              <label>Password</label>
              <input type='password' class='stretch'>
            </fieldset>
          </div>
        </div>
        <div class='modal-actions fill-gray pad2y pad4x clearfix'>
          <div class='col-xs-6'>
            <a href='#fakelink' class='btn btn-primary btn-block' data-dismiss='modal'>Sign in</a>
          </div>
          <small class='col-xs-6 pad1y center'>
            <a class='quiet' href='#fakelink'>Need an account?<i class='icon icon-arrow-right icon-sm'></i></a>
          </small>
        </div>
      </div>      
    </form>
  </div>
</div>

Media

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left-aligned image alongside textual content.

Rigby

Aw, what?! I wanted to be player one!

Mordecai

Dude, I'm player one. You're player two.

Rigby

I don't wanna be player two! He just digs with the sucky pickaxe. I want the one with the shovel.

Mordecai

Dude, they're exactly the same!

Rigby

Then why don't you be player two?

Mordecai

[scoffs] I'm not usin' that sucky pickaxe.

Rigby

HAH! SEE?!

<div class='media'>
  <a class='media-left pad1r' href='#fakelink'>
    <img src='../img/mordecai.png' class='img-rounded' width='50'>
  </a>
  <div class='media-body'>
    <h4>Mordecai</h4>
    <p>
      Dude, you've gotta stop pulling stuff out of the trash. It's unnatural!
    </p>
  </div>
</div>

Notices

Provide contextual feedback messages for typical user actions. Add dismiss functionality by using a .close button.

.alert-info

Mordecai

I don't mean to brag, I don't mean to boast, but I have some hummus for these mini toast!

.alert-warning

Rigby

If you buy that cologne, then I'm gonna lose all respect for you.

.alert-danger

Rigby

NOOOOOOOO! CURSE YOU, 'TRIPLE THREAT'!

data-dismiss

Mordecai

I don't mean to brag, I don't mean to boast, but I have some hummus for these mini toast!

<div class='alert alert-info'>
  I don't mean to brag, I don't mean to boast, but I have some hummus for these mini toast!
</div>

<div class='alert alert-warning'>
  If you buy that cologne, then I'm gonna lose all respect for you.
</div>

<div class='alert alert-danger'>
  NOOOOOOOO! CURSE YOU, "TRIPLE THREAT"!
</div>

<div class='alert alert-info'>
  <button type='button' class='close' data-dismiss='alert'>
    <span>&times;</span>
  </button>
  <h4>Mordecai</h4>
  <p>
    I don't mean to brag, I don't mean to boast, but I have some hummus for these mini toast!
  </p>
</div>

Popup

Show important notifications and additional information using popup. Motion is used to communicate secondary information by guiding the user's eye in a logical direction. A .down option is available for transitioning below the point of contact.

IO number
.down
IO number

Pagination

Three pagination types are recommended. Each is designed for unique circumstances.

Show More is ideal for situations where users don't want to cycle back and forth between pages. Next/Previous works great for blogs or when the experience is more like browsing than searching. Numbered pagination is helpful when there are many results and users need quick access to a specific page.

show more
Show more
next / previous
prev next
numbered

coming soon...

<section class='center'>
  <a class='btn btn-success btn-wide'>Show more</a>
</section>

<section class='text-right'>
  <a href='#fakelink' class='btn btn-primary'>
    <i class='icon icon-arrow-left pad0r'></i>prev
  </a>
  <a href='#fakelink' class='btn btn-primary'>
    next<i class='icon icon-arrow-right pad1l'></i>
  </a>
</section>

<section class='center'>
  to be continued...
</section>

File input

Based on Jasny control, file input lets users select a file to upload.

Select file Change Remove
<fieldset class='fileinput fileinput-new' data-provides='fileinput'>
  <div class='input-group'>
    <div class='form-control uneditable-input' data-trigger='fileinput'>
      <i class='icon icon-paperclip fileinput-exists'></i>
      <span class='fileinput-filename'></span>
    </div>
    <span class='input-group-btn btn-file'>
      <span class='btn btn-default fileinput-new' data-role='select-file'>
        Select file
      </span>
      <span class='btn btn-default fileinput-exists' data-role='change'>
        <i class='icon icon-cog pad0r'></i>Change
      </span>
      <input type='file'>
      <a href='#' class='btn btn-danger fileinput-exists' data-dismiss='fileinput'>
        <i class='icon icon-trash pad0r'></i>Remove
      </a>               
    </span>             
  </div>
</fieldset>

Tooltip

Based on TIpsy, tooltip lets users create a tooltip message. Tipsy supports calling tooltips via data-toggle attributes as well as local title storage.

Please note that due to performance concerns Tipsy needs to be initialized on the page. One way to initialize all the tooltips on the page is to select them by their data-toggle attribute.

$(function () {
  $('[data-toggle='tooltip']').tooltip()
})
<button type='button' class='btn btn-primary' data-toggle='tooltip' data-placement='left' title='Tooltip on left'>Tooltip on left</button>

<button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='top' title='Tooltip on top'>Tooltip on top</button>

<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='bottom' title='Tooltip on bottom'>Tooltip on bottom</button>

<button type='button' class='btn btn-loud' data-toggle='tooltip' data-placement='right' title='Tooltip on right'>Tooltip on right</button>

Typeahead

Restyled Twitter Typeahead. Use typeahead for autocomplete search functionality. See Bloodhound documentation for advanced lookup options.

<fieldset class='contain'>
  <input type='text' class='stretch typeahead' placeholder='States in USA' />
</fieldset>

$('.typeahead').typeahead({
  hint: true,
  highlight: true,
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});

Tags

Based on Bootstrap Tags Input, tags lets users add or remove tags and validate existing ones. Use .tagClass to assign a different fill color.

.fill-green
typeahead
<input class="tagsinput" data-role="tagsinput" value="Clean, Fresh, Modern, Unique" />

<input id="tags-green" class="tagsinput" value="Clean, Fresh, Modern, Unique" />

<fieldset class='contain'>
  <input id='tags-typeahead' type='text' class='stretch tagsinput' placeholder='States in USA' />
</fieldset>

$('#tags-green').tagsinput({
  tagClass: 'fill-green'
});

$('#tags-typeahead').tagsinput({
  typeaheadjs: {
    name: 'states',
    displayKey: 'value',
    valueKey: 'value',
    source: substringMatcher(states)
  }      
});
Made with in Norcross by the UX Team.