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

The blue header at the top of a page to indicate page title and other details

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@workday/canvas-kit-css-page-header
7.3.15a day ago3 years agoMinified + gzip package size for @workday/canvas-kit-css-page-header in KB

Readme

Canvas Kit Page Header
The page header for our application.
Mainenance Mode
> 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>