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.
Contextual title
Page heading
<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>
