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

Page action

Contextual title Page heading

Page heading Subtitle

Page action

Context link

Page heading Subtitle

Page action

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>