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.6)

Note

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

Application page title block

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
Pattern files
  1. coc-application-components.css

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

Page action

Contextual title Page heading

Page heading Subtitle

Page heading Subtitle

Page action
Context link

Page heading Subtitle

Page action

Code 


<div class="cui 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="cui 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="cui 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="cui 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="cui 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="cui 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>