Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Application page title block

The page title block can be used to contain the application’s page title.

Below are various configurations of the title, context, subtitle, and optional primary call to action button for the page.

Page heading

Context link

Page heading

Contextual title Page heading

Page heading Subtitle

Page heading Subtitle

Context link

Page heading Subtitle

Code


<body class="coc-pl coc-pl-app">
    ...

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <h1>Page heading</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <a href="#" class="page-context-link">Context link</a>
                    <h1>Page heading</h1>
                </div>
                <div class="col-action col-sm-4 col-md-3">
                    <a href="#" class="cui btn-md primary">Page action</a>
                </div>
            </div>
        </div>
    </div>

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <h1>
                        <span class="context">Contextual title</span>
                        Page heading
                    </h1>
                </div>
            </div>
        </div>
    </div>

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <h1>
                        Page heading
                        <span class="subtitle">Subtitle</span>
                    </h1>
                </div>
            </div>
        </div>
    </div>

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <h1>
                        Page heading
                        <span class="subtitle">Subtitle</span>
                    </h1>
                </div>
                <div class="col-action col-sm-4 col-md-3">
                    <a href="#" class="cui btn-md primary">Page action</a>
                </div>
            </div>
        </div>
    </div>

    <div class="app-page-title-block">
        <div class="container-fluid">
            <div class="row align-items-end">
                <div class="col-text col-sm-8 col-md-9">
                    <a href="#" class="page-context-link">Context link</a>
                    <h1>
                        Page heading
                        <span class="subtitle">Subtitle</span>
                    </h1>
                </div>
                <div class="col-action col-sm-4 col-md-3">
                    <a href="#" class="cui btn-md primary">Page action</a>
                </div>
            </div>
        </div>
    </div>

    ...
</body>