Card ​

<template>
  <div class="grid-row sm:grid-cols-2">
    <!-- 👉 Using props -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
    />

    <!-- 👉 Using custom content (without props) -->
    <ACard>
      <div class="a-card-body a-card-spacer">
        <ATypography
          title="Card title"
          subtitle="Chocolate cake tiramisu donut"
        />
        <p class="text-sm">
          Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar.
        </p>
      </div>
    </ACard>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2">
    <!-- 👉 1st card -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
    >
      <img
        src="/images/demo/minimal-1.jpg"
        alt="girl"
      >

      <div class="a-card-body a-card-spacer">
        <p class="text-sm">
          Macaroon cake powder pie cake cake gingerbread oat cake chocolate cake.
        </p>
        <ABtn>Read more</ABtn>
      </div>
    </ACard>

    <!-- 👉 2nd card -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      img="/images/demo/minimal-2.jpg"
    >
      <div class="a-card-body">
        <ABtn>Read more</ABtn>
      </div>
    </ACard>

    <!-- 👉 Awesome mobile -->
    <ACard class="sm:col-span-2">
      <!-- Grid -->
      <div class="grid-row sm:grid-cols-[2fr_5fr] gap-x-0 gap-0 items-center">
        <!-- Image -->
        <img
          src="/images/demo/minimal-3-1.png"
          alt="minimal-3"
        >
        <!-- Information -->
        <div class="a-card-body a-card-spacer">
          <ATypography
            title="Awesome mobile"
            subtitle="Biscuit liquorice apple pie candy canes"
            :text="['Donut jelly beans cake lollipop sweet biscuit. Pie apple pie powder apple pie gummi bears. Jelly apple pie croissant candy canes liquorice halvah.', 'text-sm']"
          />

          <!-- Action buttons -->
          <div class="flex flex-wrap gap-x-4 gap-y-2">
            <ABtn icon="i-bx-cart">
              Add to cart
            </ABtn>
            <ABtn
              variant="light"
              icon="i-bx-heart"
            >
              Wishlist
            </ABtn>
          </div>
        </div>
      </div>
    </ACard>
  </div>
</template>

<template>
  <div class="grid-row md:grid-cols-2">
    <!-- 👉 Fill -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="fill"
      color="primary"
    />

    <!-- 👉 Light -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="light"
      color="primary"
      class="shadow-none"
    />

    <!-- 👉 Outline -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="outline"
      color="primary"
      class="shadow-none"
    />

    <!-- 👉 Text -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="text"
      color="primary"
    />
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2">
    <!-- 👉 Usage 1 -->
    <ACard
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
    >
      <template #title>
        <div class="flex justify-between">
          <span>Card title</span>
          <div class="flex items-center gap-x-3 text-base text-light-emphasis">
            <i class="cursor-pointer i-bx-chevron-down" />
            <i class="cursor-pointer i-bx-refresh" />
            <i class="cursor-pointer i-bx-x" />
          </div>
        </div>
      </template>
    </ACard>

    <!-- 👉 Usage 2 -->
    <ACard
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
    >
      <template #title>
        <div class="flex justify-between items-center">
          <span>Card title</span>
          <a
            target="_blank"
            href="https://github.com/jd-solanki/anu"
            class="!text-light-emphasis underline text-sm"
          >Link</a>
        </div>
      </template>
    </ACard>
  </div>
</template>