Breadcrumbs

Used for breaking down large sections into manageable chunks. Ideally placed just below the page header; like on this page!

<div class="breadcrumb-nav">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="/styleguide">Style Guide Home</a></li>
            <li class="active">Components</li>
        </ol>
    </div>
</div>

Alerts

These alerts let users know about various events in their dashboard.

<div class="alert alert-success">Success!</div>
<div class="alert alert-info">Information</div>
<div class="alert alert-warning">Warning...</div>
<div class="alert alert-danger">Error!</div>

Guide category

Used for displaying a heading and an icon together in a nice visual way. The vcenter-block and vcenter classes allow the heading to be nicely centred in the middle of the block.

<div class="guide-category vcenter-block">
    <div class="vcenter">
        <i class="icon icon-wordpress"></i>
        <h1>Integrate CDNify with WordPress</h1>
    </div>
</div>

FAQ List

Used for guides, primarily; a way to display text content as a series of numbered steps.

1. Step One

2. Step Two

<ol class="faq-list media-list">
    <li class="media">
        <div class="media-body">
            <p>Step One</p>
        </div>
    </li>
    <li class="media">
        <div class="media-body">
            <p>Step Two</p>
        </div>
    </li>
</ol>

Icons

Icons are used to accentuate the surrounding content, providing a visual interest. We use an icon font so that icons can be styled using CSS.

• icon-amazon
• icon-bin
• icon-cart
• icon-chevron-left
• icon-chevron-right
• icon-code
• icon-cog
• icon-coins
• icon-custom
• icon-drupal
• icon-email
• icon-error
• icon-facebook
• icon-file
• icon-github
• icon-global
• icon-googleplus
• icon-heart
• icon-home
• icon-hosting
• icon-iphone
• icon-joomla
• icon-linkedin
• icon-logo
• icon-magento
• icon-manage
• icon-manual
• icon-menu
• icon-paper
• icon-pen
• icon-perch
• icon-picture
• icon-play
• icon-plus
• icon-question-sign
• icon-refresh
• icon-search
• icon-secure
• icon-server
• icon-share
• icon-soundcloud
• icon-speedometer
• icon-stats
• icon-stop
• icon-techstack
• icon-tick
• icon-transfer
• icon-twitter
• icon-upload
• icon-user
• icon-wordpress
• icon-wrench
• icon-youtube
• icon-zoom-in

Use these inside other elements, not as classes applied onto an existing element.

<!-- Good -->
<h1><i class="icon icon-logo"></i> CDNify</h1>

<!-- Bad -->
<h1 class="icon icon-logo">CDNify</h1>

Panels

We use two types of panels to display content and information to our users.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">Primary panel</h4>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">Information panel</h4>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

Statistics

Our dashboard gives statistics top priority, so that information can be accessible quickly.

<div class="section-feature">
    <div class="container">
        <div class="statistics">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <h3 id="hits-container">321,432</h3>
                    <p>hits <span class="used-period">this week</span></p>
                </div>
                <div class="col-md-4 col-sm-4">
                    <h3 id="bandwidth-used-container">225 GB</h3>
                    <p>bandwidth used <span class="used-period">this week</span></p>
                </div>
                <div class="col-md-4 col-sm-4">
                    <h3 id="bandwidth-remaining-container">275 GB</h3>
                    <p>bandwidth remaining</p>
                </div>
            </div>
        </div>
    </div>
</div>