Education Notice Component

Education Notice

Did you know?

You can now split payments on two cards.

<section
  class="education-notice"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
      <use href="#icon-lightbulb-24" />
    </svg>
    <h3 class="education-notice__title">Did you know?</h3>
  </div>
  <div class="education-notice__main">
    <p>You can now split payments on two cards.</p>
  </div>
</section>

Education Notice with a Prominent Icon

Default educational notice (gray background) can use a blue icon by adding an icon--prominent modifier on the icon element.

Did you know?

You can now split payments on two cards.

<section
  class="education-notice"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg
      class="icon icon--24 icon--prominent"
      height="24"
      width="24"
      aria-label="Education"
    >
      <use href="#icon-lightbulb-24" />
    </svg>
    <h3 class="education-notice__title">Did you know?</h3>
  </div>
  <div class="education-notice__main">
    <p>You can now split payments on two cards.</p>
  </div>
</section>

Prominent Education Notice

The prominent education notice includes a background color that pops a bit more. It can be used with a education-notice--prominent modifier.

Authenticity Guaranteed

Authenticity Guarantee means your item is authentic or your money back.

<section
  class="education-notice education-notice--prominent"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
      <use href="#icon-authenticity-guarantee-24" />
    </svg>
    <h3 class="education-notice__title">Authenticity Guaranteed</h3>
  </div>
  <div class="education-notice__main">
    <p>
      Authenticity Guarantee means your item is authentic or your money back.
    </p>
  </div>
</section>

Dismissable Education Notice

A close button can be placed in a education-notice__header element.

Did you know?

You can now split payments on two cards.

<section
  class="education-notice"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
      <use href="#icon-lightbulb-24" />
    </svg>
    <h3 class="education-notice__title">Did you know?</h3>
    <button
      aria-label="Close notice"
      type="button"
      class="icon-btn icon-btn--small education-notice__dismiss"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="education-notice__main">
    <p>You can now split payments on two cards.</p>
  </div>
</section>

Actionable Education Notice

Link or button actions can be placed in the education-notice__footer element.

The Vault

You can now use the Vault to store items like this securely.

Learn more link
<section
  class="education-notice"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
      <use href="#icon-the-ebay-vault-24" />
    </svg>
    <h3 class="education-notice__title">The Vault</h3>
    <button
      aria-label="Close notice"
      type="button"
      class="icon-btn icon-btn--small education-notice__dismiss"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="education-notice__main">
    <p>You can now use the Vault to store items like this securely.</p>
  </div>
  <div class="education-notice__footer">
    <a href="https://www.ebay.com"> Learn more link </a>
  </div>
</section>

Actionable Education Notice Using Fake Button

The Vault

You can now use the Vault to store items like this securely.

<section
  class="education-notice"
  role="region"
  aria-label="Education"
  aria-roledescription="Notice"
>
  <div class="education-notice__header">
    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
      <use href="#icon-the-ebay-vault-24" />
    </svg>
    <h3 class="education-notice__title">The Vault</h3>
    <button
      aria-label="Close notice"
      type="button"
      class="icon-btn icon-btn--small education-notice__dismiss"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="education-notice__main">
    <p>You can now use the Vault to store items like this securely.</p>
  </div>
  <div class="education-notice__footer">
    <button class="fake-link">Learn more button</button>
  </div>
</section>
Donut Chart ComponentEek Component