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

Note

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

Page title block

The page title block can be used to contain the website or 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


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

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

<div class="cui app-page-title-block">
    <div class="row align-items-end">
        <div class="col-text col-sm-8 col-md-9">
            <h1>
                <span class="context">{{ Context link }}</span>
                {{ Page title }}
            </h1>
        </div>
    </div>
</div>

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

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

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