<div class="space-y-4">
  <!-- Using variant (recommended) -->
  <c-lb.card variant="primary" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Primary Variant Card</c-lb.card.title>
      <p>This card uses the primary variant for consistent theming.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button variant="secondary">Buy Now</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>

  <!-- Using bg-base-100 (alternative) -->
  <c-lb.card border class="bg-base-100 shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Base Background Card</c-lb.card.title>
      <p>This card uses bg-base-100 for a neutral background.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button variant="primary">Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>

  <!-- Using custom classes (alternative) -->
  <c-lb.card class="bg-neutral text-neutral-content shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Custom Styled Card</c-lb.card.title>
      <p>You can also use custom classes for unique styling.</p>
      <c-lb.card.actions justify="end">
        <c-lb.button variant="primary">Action</c-lb.button>
      </c-lb.card.actions>
    </c-lb.card.body>
  </c-lb.card>
</div>
