Alert

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div class="aparte-alert aparte-alert--info" role="status">
  <span class="aparte-alert__icon"><aparte-icon name="info"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__title">Model switched</p>
    <p class="aparte-alert__message">The next reply uses the model you just picked.</p>
  </div>
  <button class="aparte-alert__dismiss" aria-label="Dismiss"><aparte-icon name="close"></aparte-icon></button>
</div>
<div class="aparte-alert aparte-alert--danger" role="alert">
  <span class="aparte-alert__icon"><aparte-icon name="alertTriangle"></aparte-icon></span>
  <div class="aparte-alert__body">
    <p class="aparte-alert__message">The request was refused: no API key is set.</p>
  </div>
</div>

A callout

Classes

.aparte-alert · .aparte-alert--danger · .aparte-alert--info · .aparte-alert--neutral · .aparte-alert--primary · .aparte-alert--secondary · .aparte-alert--success · .aparte-alert--warning · .aparte-alert__body · .aparte-alert__dismiss · .aparte-alert__icon · .aparte-alert__message · .aparte-alert__title

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.