carbon-components/html/notification/toast-notification.html

<!-- 
  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 aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--error" 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 aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
  <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 aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--warning" 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 aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>