carbon-components/src/components/notification/inline-notification.html

Carbon Components is a component library for IBM Cloud

<div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
  <div class="bx--inline-notification__details">
    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM5.1 13.3L3.5 12 11 2.6l1.5 1.2-7.4 9.5z"></path>
    </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
    </svg>
  </button>
</div>

<div data-notification class="bx--inline-notification bx--inline-notification--info" aria-live="polite">
  <div class="bx--inline-notification__details">
    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
    </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
    </svg>
  </button>
</div>

<div data-notification class="bx--inline-notification bx--inline-notification--success" aria-live="polite">
  <div class="bx--inline-notification__details">
    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
    </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
    </svg>
  </button>
</div>

<div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
  <div class="bx--inline-notification__details">
    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
      <path d="M8 1L0 15h16L8 1zm-.8 5h1.5v1.4L8.3 11h-.8l-.4-3.6V6h.1zm.8 8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
    </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
    </svg>
  </button>
</div>