Page Headers

Page header is a wrapper for page titles, page subtitles(optional) and page actions(optional).

Page header can contain page title, page subtitle and page actions. While page header is compulsory, either subtitle or actions or both together can be added in addition to the title. Considering the SEO parameters, page title is wrapped with <h1> tag.

<section class="content">
    <header class="content__title">
        <h1>Dashboard</h1>
    </header>

    ...
</section>
<section class="content">
    <header class="content__title">
        <h1>
            Dashboard
            <small>Welcome to the unique SuperAdmin web app experience!</small>
        </h1>
    </header>

    ...
</section>
<section class="content">
    <header class="content__title">
        <h1>
            Carousel
            <small>A slide show component for cycling through element-images or slides of text-like a carousel. Nested carousels are not supported.</small>
        </h1>

        <div class="actions">
            <a href="" class="actions__item zwicon-cog"></a>
            <a href="" class="actions__item zwicon-refresh-double"></a>

            <div class="dropdown actions__item">
                <i data-toggle="dropdown" class="zwicon-more-h"></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>
Text alignment

You can also use the helper classes in order to align the title to right or center.

<section class="content text-center"> 
    <header class="content__title">
        <h1>Dashboard</h1>
    </header>
</section>
Files required:
Type Files
Custom SCSS /src/scss/inc/_layout.scss