@carbon/charts/styles/vendor/carbon-components/html/notification/toast-notification.html

Carbon charting components

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

  <div data-notification class="bx--toast-notification bx--toast-notification--info" role="alert">
    <div class="bx--toast-notification__details">
        <h3 class="bx--toast-notification__title">Notification title</h3>
        <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
        <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
    </div>
    <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"></path><path d="M13.5 14.5l-8-8 1-1 8 8-1 1z" data-icon-path="inner-path" opacity="0"></path></svg>
    <div class="bx--toast-notification__details">
        <h3 class="bx--toast-notification__title">Notification title</h3>
        <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
        <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
    </div>
    <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-4.9 0-9 4.1-9 9s4.1 9 9 9 9-4 9-9-4-9-9-9zM8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z"></path><path d="M8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z" data-icon-path="inner-path" opacity="0"></path></svg>
    <div class="bx--toast-notification__details">
        <h3 class="bx--toast-notification__title">Notification title</h3>
        <p class="bx--toast-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
        <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
    </div>
    <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm-.8 4h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path><path d="M9.2 5h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" data-icon-path="inner-path" opacity="0"></path></svg>
    <div class="bx--toast-notification__details">
        <h3 class="bx--toast-notification__title">Notification title</h3>
        <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
        <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
    </div>
    <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>