Components

Typography, icons Icomoon, panels, as well as additional tabs, dialogs, tooltips and many others.

IcoMoon

244 icons are included in the format of the font set IcoMoon.

icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-pencil3
icon-pencil4
icon-feather
icon-brush
icon-pictures
icon-pictures2
icon-picture
icon-picture2
icon-pictures3
icon-camera
icon-camera2
icon-movie
icon-movie2
icon-movie3
icon-film
icon-film2
icon-king
icon-queen
icon-announcement
icon-announcement2
icon-broadcast
icon-books
icon-reading
icon-file
icon-file-add
icon-file-remove
icon-copy
icon-stack
icon-folder
icon-folder2
icon-folder-add
icon-folder-remove
icon-folder-add2
icon-folder-remove2
icon-folder-download
icon-folder-upload
icon-folder-download2
icon-folder-upload2
icon-folder3
icon-folder4
icon-tag
icon-tag2
icon-tag3
icon-tag4
icon-tag5
icon-barcode
icon-barcode2
icon-ticket
icon-cart
icon-cart2
icon-cart3
icon-cart4
icon-cart-add
icon-cart-remove
icon-cart-checkout
icon-basket
icon-basket2
icon-bag
icon-coin
icon-support
icon-phone
icon-phone2
icon-phone3
icon-phone4
icon-address
icon-address2
icon-notebook
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-mail5
icon-location
icon-location2
icon-location3
icon-location4
icon-map
icon-map2
icon-history
icon-clock
icon-clock2
icon-wrist-watch
icon-calendar
icon-calendar2
icon-printer
icon-printer2
icon-screen
icon-screen2
icon-laptop
icon-mobile
icon-tablet
icon-mobile2
icon-disk
icon-cd
icon-comments
icon-comments2
icon-comments3
icon-comments4
icon-comments5
icon-comments6
icon-comments7
icon-comments8
icon-comments9
icon-user
icon-user-add
icon-user-remove
icon-users
icon-users2
icon-quote
icon-quote2
icon-quote3
icon-quote4
icon-search
icon-search2
icon-zoom-in
icon-zoom-out
icon-key
icon-key2
icon-locked
icon-unlocked
icon-locked2
icon-unlocked2
icon-cogs
icon-cog
icon-cog2
icon-remove
icon-remove2
icon-remove3
icon-remove4
icon-remove5
icon-clipboard
icon-clipboard2
icon-grid
icon-list
icon-list2
icon-list3
icon-grid2
icon-list4
icon-list5
icon-list6
icon-menu
icon-menu4
icon-link
icon-star
icon-star2
icon-star3
icon-heart
icon-heart2
icon-thumbs-up
icon-thumbs-down
icon-male
icon-female
icon-reload
icon-turn
icon-expand
icon-cancel
icon-checkmark
icon-checkmark2
icon-checkmark3
icon-minus
icon-plus
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-exclamation-sign
icon-info-sign
icon-login
icon-logout
icon-arrow-up
icon-arrow-right
icon-arrow-down
icon-arrow-left
icon-arrow-up2
icon-arrow-right2
icon-arrow-down2
icon-arrow-left2
icon-arrow-up3
icon-arrow-right3
icon-arrow-down3
icon-arrow-left3
icon-arrow-up4
icon-arrow-right4
icon-arrow-down4
icon-arrow-left4
icon-arrow-down5
icon-arrow-left5
icon-arrow-right5
icon-arrow-up5
icon-arrow-left6
icon-arrow-right6
icon-arrow-up7
icon-arrow-right7
icon-arrow-left7
icon-arrow-down7
icon-sort-up
icon-sort-down
icon-sort
icon-delivery
icon-delivery2
icon-delivery3
icon-delivery4
icon-delivery5
icon-idcard
icon-idcard2
icon-idcard3
icon-mail-book
icon-user-book
icon-earth
icon-gplus
icon-gplus2
icon-gplus3
icon-facebook
icon-facebook2
icon-facebook3
icon-twitter
icon-twitter2
icon-twitter3
icon-feed
icon-feed2
icon-feed3
icon-youtube
icon-youtube2
icon-vimeo
icon-vimeo2
icon-linkedin
icon-linkedin4
icon-linkedin2
icon-html5
icon-html52
icon-chrome
icon-firefox
icon-IE
icon-opera
icon-safari
icon-toaster

Panels

Although it's not always necessary, but sometimes you need to pack DOM. For such cases, try panel component.

The main example

.panel-header - panel header

.panel-content - panel content

.panel-footer - panel footer

A simple example of panel
<div class="panel">
    <div class="panel-content">...</div>
</div>

Panel with header 

You can easily add container headers to the panel with  .panel-header.

Panel name
Panel content
<div class="panel">
    <div class="panel-header">...</div>
    <div class="panel-content">...</div>
</div>

Wrap the button or secondary text in .panel-footer. Please note, that this panel with footer doesn't inherit  colors and borders using contextual options, since they are not intended to be in the foreground.

Panel content
Panel footer
<div class="panel">
    <div class="panel-content">...</div>
    <div class="panel-footer">...</div>
</div>

Collapsible panel

You can easily collapse the panel adding the class  .collapse to .panel  and the button <span class="collapse-btn icon-plus"></span> to the panel header  .panel-header.

Panel name
Panel content
Panel footer
<div class="panel collapse">
    <div class="panel-header">...</div>
    <div class="panel-content">...</div>
    <div class="panel-footer">...</div>
</div>

Contextual alternatives

As well as other components, you can easily make a panel more expressive for a specific context adding one of the classes.

Panel name
Panel content
Panel footer
Panel name
Panel content
Panel footer
Panel name
Panel content
Panel footer
Panel name
Panel content
Panel footer
Panel name
Panel content
Panel footer
<div class="panel success">...</div>
<div class="panel info">...</div>
<div class="panel warning">...</div>
<div class="panel error">...</div>
<div class="panel gray">...</div>

Messages

Context messages for typical user activities.

Examples

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions? 

<p class="message">...</p>
<p class="message success">...</p>
<p class="message info">...</p>
<p class="message warning">...</p>
<p class="message error">...</p>
<p class="message gray">...</p>

Message with an icon

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. 

<p class="message icon-comments">...</p>

Dialog boxes

Color alternatives

The dialog box can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

  • View by default => show
  • data-dialog-classes="success" => show
  • data-dialog-classes="warning" => show
  • data-dialog-classes="error" => show
  • data-dialog-classes="info" => show

Каждое такое окошко состоит из заголовка и содержимого и может быть закрыто нажатием на иконку "x" в заголовке.

The progress bar

Color alternatives

The progress bar can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

<div class="progressbar"></div>
<div class="progressbar success"></div>
<div class="progressbar warning"></div>
<div class="progressbar error"></div>
<div class="progressbar info"></div>

Size

<div class="progressbar larger"></div>
<div class="progressbar large"></div>
<div class="progressbar"></div>
<div class="progressbar small"></div>

Slider

Color alternatives

The slider can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

<div class="range"></div>
<div class="range success"></div>
<div class="range warning"></div>
<div class="range error"></div>
<div class="range info"></div>

Size

<div class="range larger"></div>
<div class="range large"></div>
<div class="range"></div>
<div class="range small"></div>

Tabs

Vertical tabs

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

<div class="tabs vertical">
  <ul>
    <li> <a href="#tabs-1">...</a> </li>
    <li> <a href="#tabs-2">...</a> </li>
    <li> <a href="#tabs-3">...</a> </li>
  </ul>
  <div id="tabs-1">...</div>
  <div id="tabs-2">...</div>
  <div id="tabs-3">...</div>
</div>

Blocks

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

<div class="tabs blocks">
  <ul class="column_3 margin-none">
    <li> <a href="#tabs-1">...</a> </li>
    <li> <a href="#tabs-2">...</a> </li>
    <li> <a href="#tabs-3">...</a> </li>
  </ul>
  <div id="tabs-1">...</div>
  <div id="tabs-2">...</div>
  <div id="tabs-3">...</div>
</div>

Tooltips

Color alternatives

.success | .warning | .error | .info
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="success">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="warning">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="error">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="info">...</span>

Size

.larger | .large | .small
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="larger">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="large">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="small">...</span>

Callouts

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions? 
<p class="callout">...</p>

Callout with header

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions? 
<div class="callout">
    <h3 class="callout-header">...</h3>
    <p>...</p>
</div>

Color alternatives

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Header

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions? 
<p class="callout success">...</p>
<p class="callout info">...</p>
<p class="callout warning">...</p>
<p class="callout error">...</p>
<p class="callout gray">...</p>

Social elements

Buttons

GPlus Linkedin RSS Youtube 

<!-- Only icons -->
<a class="btn icon gplus icon-gplus"></a>
<a class="btn icon facebook icon-facebook"></a>
<a class="btn icon twitter icon-twitter"></a>
<a class="btn icon linkedin icon-linkedin"></a>
<a class="btn icon rss icon-feed"></a>
<a class="btn icon youtube icon-youtube"></a>

<!-- Ordinary button -->
<a class="btn gplus">GPlus</a>
<a class="btn facebook">Facebok</a>
<a class="btn twitter">Twitter</a>
<a class="btn linkedin">Linkedin</a>
<a class="btn rss">RSS</a>
<a class="btn youtube">Youtube</a>

Form fields

Signature accentuation

<p class="labeled gplus">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Google+</label>
</p>
<p class="labeled facebook">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Facebook</label>
</p>
<p class="labeled twitter">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">Twitter</label>
</p>
<p class="labeled linkedin">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">LinkedIn</label>
</p>
<p class="labeled rss">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">RSS</label>
</p>
<p class="labeled youtube">
    <input type="text" class="grid_10 alpha omega fl-right" placeholder="Enter the url" />
    <label class="grid_2 alpha omega">YouTube</label>
</p>

With icons

<p class="labeled icon left gplus">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-gplus"></i>
</p>
<p class="labeled icon left facebook">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-facebook"></i>
</p>
<p class="labeled icon left twitter">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-twitter"></i>
</p>
<p class="labeled icon left linkedin">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-linkedin"></i>
</p>
<p class="labeled icon left rss">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-feed"></i>
</p>
<p class="labeled icon left youtube">
    <input type="text" placeholder="Enter the url" />
    <i class="icon-youtube"></i>
</p>

Share with your friends

Google+