Pages

Header

There is two types of page header : - simple one with a big title and an optional subtitle - another one with a background color, icon and right controls

Example page header Subtext for header

    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>

Example page header Subtext for header

    <div class="page-header page-header-line">
      <i class="fa fa-th-list"></i>
      <h1>Example page header <small>Subtext for header</small></h1>

      <ul class="page-header-actions">
        <li>
          <a href="javascript:void(0)"><i class="fa fa-bullhorn"></i></a>
        </li>
        <li>
          <a href="javascript:void(0)"><i class="fa fa-pencil"></i></a>
        </li>
      </ul>
    </div>

Navbar

The page header navbar display tabs to navigate within a page

    <div class="page-header-navigation">
      <ul>
        <li class="active"><a href="javascript:void(0)">Section 1</a></li>
        <li><a href="javascript:void(0)">
          <i class="fa fa-pencil"></i>
          Section 2</a></li>
        <li><a href="javascript:void(0)">Section 3</a></li>
        <li><a href="javascript:void(0)">Section 4</a></li>
      </ul>
    </div>

    <div class="page-header-navigation page-header-navigation-small">
      <ul>
        <li class="active"><a href="javascript:void(0)">Section 1</a></li>
        <li><a href="javascript:void(0)">Section 2
          <i class="fa fa-pencil"></i>
          </a></li>
        <li><a href="javascript:void(0)">Section 3</a></li>
        <li><a href="javascript:void(0)">Section 4</a></li>
      </ul>
    </div>

    <div class="page-header-navigation page-header-navigation-light">
      <ul>
        <li class="active"><a href="javascript:void(0)">Section 1</a></li>
        <li><a href="javascript:void(0)">Section 2
          <i class="fa fa-pencil"></i>
          </a></li>
        <li><a href="javascript:void(0)">Section 3</a></li>
        <li><a href="javascript:void(0)">Section 4</a></li>
      </ul>
    </div>

Pages Form

There is one type of page form visible on our subects list of medias :
- simple to accelerate the user experience.

Dropdown-list
  • filter-1
  • filter-2
+ new-btn 
    <div class="example-padding">
      <div class="page-form">
        <div class="search-container input-group pull-left">
          <div class="left-box-img input-group-addon">
            <i class="fa fa-search"></i>
          </div>
          <input name="search" type="text" placeholder="Search" class="form-control">
        </div>
        <div class="dropdown-list pull-left">
          <a class="dropdown-toggle" data-toggle="dropdown">
            Dropdown-list <span class="caret"></span>
          </a>
        </div>
        <div class="filters pull-left">
          <ul>
            <li><span class="badge badge-primary">filter-1</span></li>
            <li><span class="badge">filter-2</span></li>
          </ul>
        </div>
        <div class="pull-right">
          <a class="btn btn-success">
            + new-btn
          </a>
        </div>
        <div class="list-options-example pull-right">
          <i class="fa fa-sort-alpha-asc"></i>
        </div>
      </div>
    </div>

Placeholder

Placeholder example
Placeholder example 
    <div class="page-placeholder">
      <i class="page-placeholder-icon fa fa-check"></i>
      Placeholder example
      <div class="small">
        Placeholder example
      </div>
    </div>

Adding .error change the icon color.

Placeholder example
Placeholder example 
    <div class="page-placeholder error">
      <i class="page-placeholder-icon fa fa-times"></i>
      Placeholder example
      <div class="small">
        Placeholder example
      </div>
    </div>

Separator

Separator example 

    <h3 class="separator">
      Separator example
    </h3>

Line separator :

    <hr/>