Canvas Kit Page Header
The page header for our application.
Installation
yarn add @workday/canvas-kit-css
or
yarn add @workday/canvas-kit-css-page-header
Add your node_modules
directory to your SASS includePaths
. You will then be able to import
index.scss
.
@import '~@workday/canvas-kit-css-page-header/index.scss';
Usage
Default
<header class="wdc-page-header">
<div class="wdc-page-header-container">
<h2 class="wdc-page-header-title">Page Title</h2>
<div class="wdc-icon-list">
<button class="wdc-btn-icon-inverse" aria-label="Export">
<i class="wdc-icon" data-icon="export" data-category="system" />
</button>
<button class="wdc-btn-icon-inverse" aria-label="Fullscreen">
<i class="wdc-icon" data-icon="fullscreen" data-category="system" />
</button>
</div>
</div>
</header>
With Cap Width
<header class="wdc-page-header">
<div class="wdc-page-header-container wdc-page-header-cap-width">
<h2 class="wdc-page-header-title">Page Title</h2>
<div class="wdc-icon-list">
<button class="wdc-btn-icon-inverse" aria-label="Export">
<i class="wdc-icon" data-icon="export" data-category="system" />
</button>
<button class="wdc-btn-icon-inverse" aria-label="Fullscreen">
<i class="wdc-icon" data-icon="fullscreen" data-category="system" />
</button>
</div>
</div>
</header>