<div class="space-y-4">
  <c-lb.card size="xs" variant="primary" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Xsmall Card</c-lb.card.title>
      <p>A card component has a figure, a body part, and inside body there are title and actions parts</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>

  <c-lb.card size="sm" variant="primary" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Small Card</c-lb.card.title>
      <p>A card component has a figure, a body part, and inside body there are title and actions parts</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>

  <c-lb.card size="lg" variant="primary" class="shadow-sm w-96">
    <c-lb.card.body>
      <c-lb.card.title>Large Card</c-lb.card.title>
      <p>A card component has a figure, a body part, and inside body there are title and actions parts</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>
</div>
