Content Area

Page content

The content of a page should be inside .page-content element:

html

<div class="main-container bgc-white">
    <div id="sidebar" class="sidebar sidebar-light expandable">
        ...
    </div>

    <div class="main-content" role="main">
        <div class="page-content">
            ...
        </div>
    </div><!-- main -->
</div>

.page-content has some default padding from sides but you can also use custom classes:

html

<div class="page-content px-2 px-md-3 px-xl-4">
 ...
</div>

Inside .page-content is optional.
In Ace's demo, I add a .page-header which includes .page-title and .page-tools in some pages.
For example:

html

<div class="page-header">
    <h1 class="page-title text-primary-d2">
        Dashboard
        <small class="page-info text-secondary-d2">
            <i class="fa fa-angle-double-right"></i>
            overview & stats
        </small>
    </h1>

    <div class="page-tools">
        <button type="button" class="btn btn-sm btn-lighter-default btn-h-lighter-purple btn-a-lighter-purple border-b-2">
            <i class="fa fa-save text-120 text-purple-m1"></i>
        </button>
        <button type="button" class="btn btn-sm btn-lighter-default btn-h-lighter-success btn-a-lighter-success border-b-2">
            <i class="fa fa-undo text-110 text-success-m1"></i>
        </button>
    </div>
</div>

You can change .page-header's border or color by using custom classes such as .text-purple, etc

Content Cards

In Dashboard most content boxes are .ccard elements which has adds a border, a small shadow, rounded corners and white background to the element.
You can also use it with .card element:

Content Card

html

<div class="ccard px-3">
  My content
</div>

<div class="card ccard">
  <div class="card-header">
   ...
  </div>
  <div class="card-body">
   ...
  </div>
</div>

There are also .bcard (used in Dashboard 2) and .dcard with some differences.
Content Card

.acard is a transparent card.

Breadcrumbs

A sample breadcrumbs is like this:

html

<ol class="breadcrumb breadcrumb-nosep align-items-center pl-1 text-nowrap mr-2">
    <li class="breadcrumb-item text-secondary text-100">Forms</li>
    <li class="mx-15 text-grey-l4 text-110">/</li><!-- separator -->
    <li class="breadcrumb-item active text-dark-tp4 text-105 text-600">Basic Elements</li>                            
</ol>

Like in the above example, you can add .breadcrumb-nosep to .breadcrumb to hide the auto-inserted separator and insert custom separators instead.

You can also have .content-nav element with custom background, border and padding classes, before .page-content:

html

<div class=" content-nav mb-1 bgc-grey-l4">
  <div class="d-flex justify-content-between align-items-center">
    <ol class="breadcrumb pl-2">
       ...
    </ol>

    <div class="nav-search">
       ...
    </div>
  </div>          
</div>

<div class="page-content">
  ...
</div>

Themes

See Content Themes