<

Voyager
Voyager

Page Header

Page headers are used at the top of several page types and contains the Title of the page. It contains a combination of icon and button components, along with typographic utilities.

Basic

Feedback

HTML

<div class="qw-feature-header">
    <svg class="qw-feature-icon qw-feature-icon-lg qw-feature-color-FeatureName" viewBox="0 0 24 24" aria-hidden="true">
        <use xlink:href="#qw-icon-FeatureName"></use>
    </svg>
    <h1>Page Title</h1>
</div>

Page Header with Actions

Engagement Pulse

When actions are included, they are aligned to the right of the Page Header. The Primary Action is placed on the far right.

HTML

<div class="qw-feature-header">
    <svg class="qw-feature-icon qw-feature-icon-lg qw-feature-color-FeatureName" viewBox="0 0 24 24" aria-hidden="true">
        <use xlink:href="#qw-icon-FeatureName"></use>
    </svg>
    <h1>Page Title</h1>
    <div class="d-flex flex-row-reverse ml-auto">
        <button type="button" class="btn btn-primary">Primary CTA</button>
        <button type="button" class="btn btn-default mr-2">CTA</button>
    </div>
</div>

Page Header in Analytics

Add .qw-analytics-header to the .qw-feature-header to style the page header for use in Analytics. Action buttons in Analytics should use the .btn-dark variant.

Engagement Pulse