Skip to content
STYLESCAPE

Title Bar

Examples for the ss-c-title-bar module: the title row of an app page, with breadcrumbs or an eyebrow above the heading, an optional description and the page's actions at the end. The Jinja page_header macro and stylescape/base.html.jinja render it.

With actions

Projects

Harbour quay renewal

Renewal of 400 m of quay wall, phase 2 of 3.

Edit Delete
HTML 
<header class="ss-c-title-bar">
            <div class="ss-c-title-bar__text">
                <p class="ss-c-title-bar__eyebrow">Projects</p>
                <h3 class="ss-c-title-bar__title">Harbour quay renewal</h3>
                <p class="ss-c-title-bar__description">Renewal of 400 m of quay wall, phase 2 of 3.</p>
            </div>
            <div class="ss-c-title-bar__actions">
                <a class="ss-c-button" href="#edit">Edit</a>
                <a class="ss-c-button ss-c-button--danger" href="#delete">Delete</a>
            </div>
        </header>

Plain

--plain drops the divider and its padding.

Settings

HTML 
<header class="ss-c-title-bar ss-c-title-bar--plain">
            <div class="ss-c-title-bar__text"><h3 class="ss-c-title-bar__title">Settings</h3></div>
        </header>