<div class="space-y-4">
  <c-lb.card variant="primary" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Primary Card</c-lb.card.title>
      <p>This card uses the primary color variant.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button>Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>

  <c-lb.card variant="success" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Success Card</c-lb.card.title>
      <p>This card uses the success color variant.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button>Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>

  <c-lb.card variant="warning" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Warning Card</c-lb.card.title>
      <p>This card uses the warning color variant.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button>Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>

  <c-lb.card variant="error" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Error Card</c-lb.card.title>
      <p>This card uses the error color variant.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button>Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>
</div>
