Alert

Hairline frame with an ink icon. Solid ink variant for critical.

Heads up

Your workspace syncs every hour.

Hold

Press paused

Ink density drifted on the 184. Recheck the sheet.

Install

npx @noordvc/raster-cli add alert

Markup

<div class="rs-alert" role="status"><div><span class="rs-alert-title">Heads up</span><p class="rs-alert-body">Your workspace syncs every hour.</p></div></div>

React

import { Alert } from "@/components/raster/alert";

<Alert title="Heads up">Your workspace syncs every hour.</Alert>
<Alert variant="solid" title="Payment failed">Update your card to keep publishing.</Alert>

Classes

.rs-alert.rs-alert-title.rs-alert-body.rs-alert-solid