@workday/canvas-kit-css-page-header

Canvas Kit Page Header

The page header for our application.

> Workday Design Reference

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>