Alert

Alerts are used to highlight important messages. They are fully responsive and support multiple variants.

This is a basic info alert.

<div class="quanta-alert quanta-alert-info">
  <svg>...</svg>
  This is a basic info alert.
</div>

Variants

Quanta alerts come in various visual styles.

Success alert

Warning alert

Error alert

Primary alert

Neutral alert

Accent alert

<div class="quanta-alert quanta-alert-success">Success alert</div>
<div class="quanta-alert quanta-alert-warning">Warning alert</div>
<div class="quanta-alert quanta-alert-error">Error alert</div>
<div class="quanta-alert quanta-alert-primary">Primary alert</div>
<div class="quanta-alert quanta-alert-neutral">Neutral alert</div>
<div class="quanta-alert quanta-alert-accent">Accent alert</div>

Responsive Behavior

Alerts adapt padding and width based on screen size:

@media (min-width: var(--quanta-screen-md)) {
  .quanta-alert {
    padding: var(--quanta-space-3);
    width: 90%;
  }
}

@media (min-width: var(--quanta-screen-lg)) {
  .quanta-alert {
    padding: var(--quanta-space-4);
    width: 80%;
  }
}