Inline Notice Component

An inline notice may optionally show a status icon. Add the inline-notice--confirmation, inline-notice--attention, inline-notice--information, or inline-notice--warning modifier to the inline notice to apply the corresponding status color to its icon.

<div class="inline-notice">
  <span class="inline-notice__main">
    <p>
      Your price has been updated.
      <button class="fake-link" type="button">Dismiss</button>
    </p>
  </span>
</div>
<div class="inline-notice inline-notice--confirmation">
  <span class="inline-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Confirmation"
    >
      <use href="#icon-confirmation-filled-16" />
    </svg>
  </span>
  <span class="inline-notice__main">
    <p>Your price has been updated.</p>
  </span>
</div>
<div class="inline-notice inline-notice--information">
  <span class="inline-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Information"
    >
      <use href="#icon-information-filled-16" />
    </svg>
  </span>
  <span class="inline-notice__main">
    <p>
      <a href="https://www.ebay.com"> Send offers </a>
      to interested buyers.
    </p>
  </span>
</div>
<div class="inline-notice inline-notice--attention">
  <span class="inline-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Attention"
    >
      <use href="#icon-attention-filled-16" />
    </svg>
  </span>
  <span class="inline-notice__main">
    <p>
      <a href="https://www.ebay.com"> Add required aspects </a>
      to keep item alive.
    </p>
  </span>
</div>
<div class="inline-notice inline-notice--warning">
  <span class="inline-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Warning"
    >
      <use href="#icon-attention-triangle-filled-16" />
    </svg>
  </span>
  <span class="inline-notice__main">
    <p>Your draft will expire soon.</p>
  </span>
</div>