Section Notice Component

<section
  class="section-notice"
  role="region"
  aria-label="Notice"
  aria-roledescription="Notice"
>
  <div class="section-notice__main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

Status Section Notice

A status-based section notice has a 16x16 icon representing confirmation, attention or information.

Add the section-notice--confirmation, section-notice--attention, or section-notice--information modifier to the section notice to apply the corresponding status color to its icon.

<section
  class="section-notice section-notice--confirmation"
  role="region"
  aria-label="Confirmation"
  aria-roledescription="Notice"
>
  <div class="section-notice__header" id="section-notice-confirmation">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Confirmation"
    >
      <use href="#icon-confirmation-filled-16" />
    </svg>
  </div>
  <div class="section-notice__main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>
<section
  class="section-notice section-notice--attention"
  role="region"
  aria-label="Attention"
  aria-roledescription="Notice"
>
  <div class="section-notice__header" id="section-notice-attention">
    <svg class="icon icon--16" height="16" width="16" aria-label="Attention">
      <use href="#icon-attention-filled-16" />
    </svg>
  </div>
  <div class="section-notice__main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>
<section
  class="section-notice section-notice--information"
  role="region"
  aria-label="Information"
  aria-roledescription="Notice"
>
  <div class="section-notice__header" id="section-notice-information">
    <svg class="icon icon--16" height="16" width="16" aria-label="Information">
      <use href="#icon-information-filled-16" />
    </svg>
  </div>
  <div class="section-notice__main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

Titled Section Notice

Use a heading element to create a titled section notice.

<section
  class="section-notice section-notice--confirmation"
  role="region"
  aria-label="Confirmation"
  aria-roledescription="Notice"
>
  <div class="section-notice__header" id="section-notice-confirmation">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Confirmation"
    >
      <use href="#icon-confirmation-filled-16" />
    </svg>
  </div>
  <div class="section-notice__main">
    <h3 class="section-notice__title">Notification title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

Dismissable Section Notice

A close button can be placed in a section-notice__footer element.

<section
  class="section-notice section-notice--confirmation"
  role="region"
  aria-label="Confirmation"
  aria-roledescription="Notice"
>
  <div class="section-notice__header" id="section-notice-confirmation">
    <svg
      class="icon icon--16"
      height="16"
      width="16"
      role="img"
      aria-label="Confirmation"
    >
      <use href="#icon-confirmation-filled-16" />
    </svg>
  </div>
  <div class="section-notice__main">
    <h3 class="section-notice__title">Notification title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="section-notice__footer">
    <button aria-label="Close notice" class="fake-link section-notice__dismiss">
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
</section>

Actionable Section Notice

Link or button actions can be placed in a section-notice__cta element.

<section
  class="section-notice section-notice--confirmation"
  role="region"
  aria-label="Confirmation"
  aria-roledescription="Notice"
>
  <div class="section-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="section-notice__main">
    <h3 class="section-notice__title">Notification title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <p class="section-notice__cta">
    <a href="https://www.ebay.com"> Action </a>
  </p>
  <div class="section-notice__footer">
    <button aria-label="Close notice" class="fake-link section-notice__dismiss">
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
</section>