<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" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z" fill-rule="evenodd" />
    </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" 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--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" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" fill-rule="evenodd" />
    </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" 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--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" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-11.332L6.75 9.21 4.707 7.168 3.293 8.582 6.75 12.04l5.957-5.957-1.414-1.414z"
        fill-rule="evenodd" />
    </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" 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--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" xmlns="http://www.w3.org/2000/svg">
      <path d="M.75 16a.75.75 0 0 1-.67-1.085L7.33.415a.75.75 0 0 1 1.34 0l7.25 14.5A.75.75 0 0 1 15.25 16H.75zm6.5-10v5h1.5V6h-1.5zM8 13.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0 1.5z"
        fill-rule="nonzero" />
    </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" 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>

body {
  padding: 2rem 3%;
}