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

9.1.26 • Public • Published

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>

Package Sidebar

Install

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

Weekly Downloads

12

Version

9.1.26

License

Apache-2.0

Unpacked Size

28.4 kB

Total Files

8

Last publish

Collaborators

  • jaclynjessup
  • nicholasboll
  • alanbsmith
  • workday-canvas-kit
  • justin.pante
  • anicholls