Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/education-notice

DS v1

Education Notice

The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.

Education notice can use any large 24x24 program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.

You can now split payments on two cards.

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.

You can now split payments on two cards.

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 Guarantee means your item is authentic or your money back.

Dismissable Education Notice

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

You can now split payments on two cards.

Actionable Education Notice

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

Actionable Education Notice Using Link

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

Actionable Education Notice Using Fake Button

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

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

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

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

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

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