Alert

Contextual feedback blocks for success, warning, danger, info, and dismissible application states.

Each example uses Sass v2 classes directly while the page still renders through the normal Header/Body/Footer service_3_modern section.

Component

Alert variants

Use color variants to express status without custom CSS.

✓

SuccessPayment finalized and subscription activated.

WarningYour API key expires soon.

ErrorPassword confirmation does not match.

InfoDataboard compile completed.

Component

Alert variants html

<div class="antsand-alert antsand-alert-success">
  <span class="antsand-alert-icon">✓</span>
  <div class="antsand-alert-content"><strong>Success</strong>Message</div>
</div>

Dismissible alert

Include a close button when JS can remove or collapse the alert.

ⓘ

Deploy readyReview the generated route map before publishing.

Component

Dismissible alert html

<button class="antsand-alert-close" type="button" aria-label="Close">×</button>

The live examples and code samples are stored in databoard.menu, mapped into api_data, and rendered by the shared H/B/F template.

Data mapping json

{"api_data": [["api_data"], ["databoard", "menu", "stylesdoc_component_alert"]]}

Alert

Alert variants

Dismissible alert

Data-first component docs

ANTSAND

Framework

Integration

Ecosystem