There are 3 types of page headers based on the header contents available on the page.
<section class="content">
<header class="content__title">
<h1>Dashboard</h1>
</header>
...
</section>
<section class="content">
<header class="content__title">
<h1>Dashboard</h1>
<small>Welcome to the unique SuperAdmin web app experience!</small>
</header>
...
</section>
<section class="content">
<header class="content__title">
<h1>Carousel</h1>
<small>A slide show component for cycling through element-images or slides of text-like a carousel. Nested carousels are not supported.</small>
<div class="actions">
<a href="" class="actions__item zmdi zmdi-trending-up"></a>
<a href="" class="actions__item zmdi zmdi-check-all"></a>
<div class="dropdown actions__item">
<i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item">Refresh</a>
<a href="" class="dropdown-item">Manage Widgets</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</header>
...
</section>You can also use the helper classes in order to align the title to right or center.
<div id="content">
<div class="content__header text-right"><!-- or .text-center -->
<h2>This is a page header</h2>
</div>
</div>Requirements:
/scss/inc/_layout.scss