Alert

<div class="nano-alert nano-alert--success" role="alert">
  <div class="nano-alert__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
         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"/>
      <polyline points="22 4 12 14.01 9 11.01"/>
    </svg>
  </div>
  <div class="nano-alert__content">
    <p class="nano-alert__title">Success!</p>
    <p class="nano-alert__description">Your changes have been saved.</p>
  </div>
</div>

<!-- Variants: nano-alert--success, nano-alert--warning, nano-alert--destructive -->