Alert

<div class="b-1 bc-silver-2 bg-silver-1/20 rad-0 p-4 tc-black">
   <span class="fs-sm fw-500">You're on the free plan. Upgrade to unlock all features.</span>
</div>

<div class="b-1 bc-blue-2 bg-blue-1/20 rad-0 p-4 d-f ai-c g-3 tc-blue-10">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
   <span class="fs-sm fw-500">You can track your order in the order history.</span>
</div>

<div class="b-1 bc-green-2 bg-green-1/20 rad-0 p-4 d-f ai-c g-3 tc-green-10">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
   <span class="fs-sm fw-500">Your order is on the way! Please check your email for details.</span>
</div>

<div class="b-1 bc-yellow-2 bg-yellow-1/20 rad-0 p-4 d-f ai-c g-3 tc-yellow-10">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
   <span class="fs-sm fw-500">Your account doesn't have 2FA enabled.</span>
</div>

<div class="b-1 bc-red-2 bg-red-1/20 rad-0 p-4 d-f ai-c g-3 tc-red-10">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
   <span class="fs-sm fw-500">Your payment couldn't be processed. Please check your card details.</span>
</div>

<div class="b-1 bc-blue-2 bg-blue-1/20 rad-0 p-4 d-f ai-fs g-3 tc-blue-10">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 f-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
   <div class="d-f fd-c g-1">
      <span class="fs-sm fw-600">You're on the free trial.</span>
      <span class="fs-sm">Your free trial will expire in 30 days. Add a payment method to keep your account active.</span>
   </div>
</div>

<div class="b-1 bc-silver-2 bg-silver-1/20 rad-0 p-4 d-f ai-c jc-sb g-4 tc-silver-7">
   <div class="d-f ai-c g-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
      <span class="fs-sm fw-500">Your profile picture has been updated.</span>
   </div>
   <button class="ai-c d-f jc-c g-2 px-3 py-1 rad-0 fs-xs fw-500 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Undo</button>
</div>