Nothing Prevents Misery

    @workday/canvas-kit-css-banner

    8.4.1 • Public • Published

    Canvas Kit Banner

    Errors and Alerts notify users of missteps that happen within a workflow and describe how the user can take appropriate action to resolve them.

    Mainenance Mode

    > Workday Design Reference

    Installation

    yarn add @workday/canvas-kit-css

    or

    yarn add @workday/canvas-kit-css-banner

    Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

    You must have PostCSS support. Add the postcss-inline-svg plugin to properly process and inline icons. Process your SASS through PostCSS once it has been compiled to CSS.

    @import '~@workday/canvas-kit-css-banner/index.scss';

    Usage

    Use by applying .wdc-banner.

    .wdc-banner-text - Contains the alert/error text.
    .wdc-banner-right - Rightmost area containing a link.

    <a class="wdc-banner" href="#">
      <span class="wdc-banner-text">
        12 Alerts
      </span>
      <span class="wdc-banner-link">
        View All
      </span>
    </a>

    Variant

    .wdc-banner-error

    Set the banner variant as error

    <a class="wdc-banner wdc-banner-error" href="#">
      <span class="wdc-banner-text">
        24 Errors and 12 Alerts
      </span>
      <span class="wdc-banner-link">
        View All
      </span>
    </a>

    .wdc-banner-sticky

    Set the banner variant as sticky. Text will truncate with an ellipsis if longer than maximum width.

    <a class="wdc-banner wdc-banner-sticky" href="#">
      <span class="wdc-banner-text">
        12 Alerts
      </span>
      <span class="wdc-banner-link">
        View All
      </span>
    </a>

    Responsive

    Responsive styles will modify both the full and minimized alert bars at smaller screen sizes. The full alert bar will have a fixed width while the minimized bar will only have the icon shown.

    Accessibility

    See canvas-kit-core for accessibility guidelines.

    Install

    npm i @workday/canvas-kit-css-banner

    DownloadsWeekly Downloads

    1,042

    Version

    8.4.1

    License

    Apache-2.0

    Unpacked Size

    38.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante