<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" direction="vertical" class="sm:alert-horizontal" icon="rmx.information">
    <div>
      <h3 class="font-bold">Responsive Alert</h3>
      <div class="text-xs">Vertical on mobile, horizontal on desktop</div>
    </div>
    <c-slot name="actions">
      <button class="btn btn-sm">See</button>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="success" direction="vertical" class="sm:alert-horizontal" icon="rmx.check">
    <span>Your purchase has been confirmed!</span>
    <c-slot name="actions">
      <button class="btn btn-sm btn-success">Continue</button>
    </c-slot>
  </c-lb.alert>
</div>
