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

Carbon Components is a component library for IBM Cloud

<!-- 
  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--inline-notification bx--inline-notification--info" 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 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></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" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-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--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" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-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--inline-notification bx--inline-notification--success" 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-11.332L6.75 9.21 4.707 7.168 3.293 8.582 6.75 12.04l5.957-5.957-1.414-1.414z"></path>
      </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-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>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-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--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"></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" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-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>