Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/page-notice

DS v3

A page notice appears prominently at the top of the page, for high priority use cases, conveying the next course of action for a task or flow.

To aid discoverabilty for assistive technology, each page notice is a labelled landmark region with a level-2 heading.

A page notice can have a status of general (default), confirmation, attention or information.

We've updated the look and feel of this page. Customize anytime in settings.

You have opted into eBay Pay and will now get paid directly.

Your selling account has been deactivated.

Opt into eBay payments before Jan 12th to pay no selling fees.

Dismissable Page Notice With Title

Notice Title

Opt into eBay payments before Jan 12th to pay no selling fees.

Opt in

Form Error Page Notice

We found problems with your form.

Error 1 , Error 2 , Error 3 .

<section
  class="page-notice page-notice--attention"
  role="region"
  aria-label="Attention"
>
  <div class="page-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Attention"
    >
      <use href="#icon-attention-filled-16" />
    </svg>
  </div>
  <div class="page-notice__main">
    <h2 class="page-notice__title">We found problems with your form.</h2>
    <p>
      <a href="#"> Error 1 </a>
      ,
      <a href="#"> Error 2 </a>
      ,
      <a href="#"> Error 3 </a>
      .
    </p>
  </div>
</section>

<h3 id="page-notice-dismissable-title">Dismissable Page Notice With Title</h3>
<section
  class="page-notice page-notice--information"
  role="region"
  aria-label="Information"
>
  <div class="page-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Information"
    >
      <use href="#icon-information-filled-16" />
    </svg>
  </div>
  <div class="page-notice__main">
    <h3 class="page-notice__title">Notice Title</h3>
    <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
  </div>
  <p class="page-notice__cta">
    <a href="https://www.ebay.com"> Opt in </a>
  </p>
  <div class="page-notice__footer">
    <button
      aria-label="Dismiss notification"
      class="fake-link page-notice__dismiss"
    >
      <svg aria-hidden="true" class="icon icon--16" height="10" width="10">
        <use href="#icon-close" />
      </svg>
    </button>
  </div>
</section>

<section class="page-notice" role="region" aria-label="Notice">
  <div class="page-notice__main">
    <h2 class="page-notice__title">
      We've updated the look and feel of this page. Customize anytime in
      settings.
    </h2>
  </div>
</section>
<section
  class="page-notice page-notice--confirmation"
  role="region"
  aria-label="Confirmation"
>
  <div class="page-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Confirmation"
    >
      <use href="#icon-confirmation-filled-16" />
    </svg>
  </div>
  <div class="page-notice__main">
    <h2 class="page-notice__title">
      You have opted into eBay Pay and will now get paid directly.
    </h2>
  </div>
  <div class="page-notice__footer">
    <a href="https://www.ebay.com"> Dismiss </a>
  </div>
</section>
<section
  class="page-notice page-notice--attention"
  role="region"
  aria-label="Attention"
>
  <div class="page-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Attention"
    >
      <use href="#icon-attention-filled-16" />
    </svg>
  </div>
  <div class="page-notice__main">
    <h2 class="page-notice__title">
      Your selling account has been deactivated.
    </h2>
  </div>
  <div class="page-notice__footer">
    <button class="fake-link">Learn More</button>
  </div>
</section>
<section
  class="page-notice page-notice--information"
  role="region"
  aria-label="Information"
>
  <div class="page-notice__header">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Information"
    >
      <use href="#icon-information-filled-16" />
    </svg>
  </div>
  <div class="page-notice__main">
    <h2 class="page-notice__title">
      Opt into eBay payments before Jan 12th to pay no selling fees.
    </h2>
  </div>
  <div class="page-notice__footer">
    <a href="https://www.ebay.com"> Opt in </a>
  </div>
</section>