Version 3.0.6

Titles

Page titles help the user understand where they are within the product. Subtitles reveal context while the page title is big and bold so the user is always clear where they are. Additional meta data about a page can be included as well, including status information and other buttons.

Page Title
                      
<h5 class="page-title">Page Title</h5>
Page Title

Page Title Description

                      
<div class="page-title-container">
<div class="page-title-group">
<h5 class="page-title">Page Title</h5>
<h3 class="page-title-description">Page Title Description</h3>
</div>
</div>

Subtitle

Page Title

Page Title Description

                      
<div class="page-title-container">
<div class="page-title-group">
<h3 class="page-title-sub">Subtitle</h3>
<h5 class="page-title">Page Title</h5>
<h3 class="page-title-description">Page Title Description</h3>
</div>
</div>

We support active, inactive, and paused statuses for titles.

Page Title

Page Title Description

Page Title

Page Title Description

Page Title

Page Title Description

                      
<div class="page-title-container has-status">
<div class="page-title-group">
<h5 class="page-title">Page Title
<span class="page-title-group-actions">
<button class="tag-static white">Active</button>
</span>
</h5>
<h3 class="page-title-description">Page Title Description
</div>
</div>
<div class="page-title-container has-status">
<div class="page-title-group">
<h5 class="page-title">Page Title
<span class="page-title-group-actions">
<button class="tag-static white">Inactive</button>
</span>
</h5>
<h3 class="page-title-description">Page Title Description </h3>
</div>
</div>
<div class="page-title-container has-status">
<div class="page-title-group">
<h5 class="page-title">Page Title
<span class="page-title-group-actions">
<button class="tag-static white">Paused</button>
</span>
</h5>
<h3 class="page-title-description">Page Title Description </h3>
</div>
</div>

Subtitle

Page Title

Page Title Description

                      
<div class="page-title-container has-status">
<div class="page-title-group">
<h3 class="page-title-sub">Subtitle</h3>
<h5 class="page-title">Page Title
<span class="page-title-group-actions">
<button class="btn btn-blue btn-ghost btn-xs">Follow</button>
</span>
</h5>
<h3 class="page-title-description">Page Title Description</h3>
</div>
</div>

Search Results

Powered by