Page Header - ZUI Documentation

Summary

The page header pattern is meant to display information in the header of a single page. This is different than a top bar in a sense that the top bar is the same on each page. A page header also contains information such as buttons or a page title for the specific page.

There are no attributes defined for this pattern.

Example

Markup

<div class="zui-page-header">
    <div class="zui-page-header-inner">
        <div class="zui-page-header-main">
            <ol class="zui-nav zui-nav-breadcrumbs">
                <li><a href="#">Breadcrumbs</a></li>
                <li><a href="#">Sub page</a></li>
                <li class="selected">Parent page</li>
            </ol>
            <h1>Hello World</h1>
        </div>
    </div>
</div>

<div class="zui-page-header">
    <div class="zui-page-header-inner">
        <div class="zui-page-header-main">
            <h1>Hello World</h1>
        </div>
        <div class="zui-page-header-actions">
            <div class="zui-button-group">
                <button>Action</button>
                <button>Action</button>
                <button>Action</button>
            </div>
        </div>
    </div>
</div>

<div class="zui-page-header">
    <div class="zui-page-header-inner">
        <div class="zui-page-header-image">
            <img src="img/space-64x64.png" class="zui-image-round">
        </div>
        <div class="zui-page-header-main">
            <ol class="zui-nav zui-nav-breadcrumbs">
                <li><a href="#">Breadcrumbs</a></li>
                <li><a href="#">Sub page</a></li>
                <li class="selected">Parent page</li>
            </ol>
            <h1>Hello World</h1>
        </div>
        <div class="zui-page-header-actions">
            <div class="zui-button-group">
                <button>Action</button>
                <button>Action</button>
                <button>Action</button>
            </div>
        </div>
    </div>
</div>

<div class="zui-page-header">
    <div class="zui-page-header-inner">
        <div class="zui-page-header-image">
            <img src="img/space-64x64.png" class="zui-image-round">
        </div>
        <div class="zui-page-header-main">
            <h1>ZUI</h1>

            <ul class="zui-page-header-details">
                <li><span class="zui-list-label">Key:</span> <span>ZUI</span></li>
                <li>
                    <span class="zui-list-label">Lead:</span> 
                    <a href="#">
                        Walter Tamboer
                    </a>
                </li>
                <li><span class="zui-list-label">URL:</span> <a href="#" target="_blank">http://github.com/zource/zui</a></li>
            </ul>
        </div>
        <div class="zui-page-header-actions">
            <div class="zui-button-group">
                <button>Action</button>
                <button>Action</button>
                <button>Action</button>
            </div>
        </div>
    </div>
</div>