Page Notice Component

<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>

Dismissable Page Notice With Title

<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>

Form Error Page Notice

<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>