Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/inline-notice

DS v2.2

The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.

An inline-level notice provides tips, guidance and feedback on individual elements and form controls.

An inline-level notice may have a status of general (default), confirmation, information or attention.

Your price has been updated.

Send offers to interested buyers.

Add required aspects to keep item alive.

<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 icon--confirmation-filled"
      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 icon--information-filled"
      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 icon--attention-filled"
      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>