JSPM

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

3.0.0-alpha.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 213
  • Score
    100M100P100Q91114F
  • License Apache-2.0

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

Package Exports

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

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-css-page-header) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

<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 wdc-icon-list-white">
      <div class="wdc-icon-list-icon">
        <!-- wd-icon-export.svg -->
      </div>
      <div class="wdc-icon-list-icon">
        <!-- wd-icon-fullscreen.svg -->
      </div>
    </div>
  </div>
</header>

Marketing Contexts

If you would like to use it in a marketing context with a fixed width and padding that matches other marketing content, simply replace .wdc-page-header-container with the marketing container component (.wdc-marketing-container).

Example:

<header class="wdc-page-header">
  <div class="wdc-marketing-container">
    <h2 class="wdc-page-header-title">Page Title</h2>
    <div class="wdc-icon-list wdc-icon-list-white">
      <div class="wdc-icon-list-icon">
        <!-- wd-icon-export.svg -->
      </div>
      <div class="wdc-icon-list-icon">
        <!-- wd-icon-fullscreen.svg -->
      </div>
    </div>
  </div>
</header>