Card

Card is a versatile component that can be used to display content and information in a variety of ways and can drive users to a desired action.

Design Hints

Used effectively, cards can drive users to a desired action. It is a simple way to group elements together. Cards can contain many different types of elements inside like buttons, images, paragraphs, headings, lists etc. Cards can bring a sense of visual interest and help emphasize important information.

Accessiblity Hints

For accessibility, it is important to ensure that the content inside the card is readable and understandable to all users, including those with visual impairments. This can be achieved by using appropriate color contrast, clear and concise language, and providing alternative text for images. Additionally, it is recommended to use headings and subheadings to break up the content and make it easier to scan. Links and Buttons should also have descriptive text to provide context and help users.

Simple Card

This is a simple card that can be used to display information or content. It can be used for different types of actions, such as displaying images, items, forms, services, or any other type of information.

A desk with PC peripherals and Stationery on it

Boost your conversion rate

by John Doe Mar 16, 2024 6 min read

The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.

<div
  class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-300 bg-gray-50 text-start shadow-lg dark:border-zinc-800/50 dark:bg-zinc-900 dark:shadow-black"
>
  <div class="flex-0 max-h-max">
    <img
      src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="bg-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between px-6 py-4 text-zinc-950 dark:text-zinc-400"
  >
    <div class="flex flex-col">
      <h3
        class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
      >
        Boost your conversion rate
      </h3>
      <div
        class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
      >
        <a href="#" class="hover:underline"> by John Doe </a>
        <span aria-hidden="true">&middot;</span>
        <time datetime="2024-03-16">Mar 16, 2024</time>
        <span aria-hidden="true">&middot;</span>
        <span>6 min read</span>
      </div>

      <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
        The top 10 techniques for boosting your conversion rate. Use these
        techniques to increase your conversion rate and grow your business.
      </p>
      <a
        href="#"
        class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
      >
        <span>Read More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </svg>
      </a>
    </div>
  </div>
</div>

---
const post = {
  title: "Boost your conversion rate",
  href: "#",
  description:
    "The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.",
  date: "Mar 16, 2024",
  datetime: "2020-03-16",
  imageUrl:
    "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
  readingTime: "6 min",
  author: {
    name: "John Doe",
    href: "#",
  },
}; /* You can accept this data as props to the component like this : const { post } = Astro.props; to make it dynamic and resusable */
---

<div
  class="flex flex-col overflow-hidden rounded-lg border border-gray-300 bg-gray-50 text-start shadow-xl dark:border-zinc-800/50 dark:bg-zinc-900 dark:shadow-black"
>
  <div class="flex-0 max-h-max">
    <img
      src={post.imageUrl}
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="bg-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between px-6 py-4 text-zinc-950 dark:text-zinc-400"
  >
    <div class="flex flex-col space-y-6">
      <div>
        <h3
          class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
        >
          {post.title}
        </h3>
        <div
          class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
        >
          <a href={post.author.href} class="hover:underline">
            by {post.author.name}
          </a>
          <span aria-hidden="true">&middot;</span>
          <time datetime={post.datetime}>{post.date}</time>
          <span aria-hidden="true">&middot;</span>
          <span>{post.readingTime} read</span>
        </div>
      </div>
      <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
        {post.description}
      </p>
      <a
        href="#"
        class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
      >
        <span>Read More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </svg>
      </a>
    </div>
  </div>
</div>

Note: The max width for the card is set with max-w-sm class which has to be removed in case you want the card to have a larger width.

Design Hints

The card uses a shadow, a lighter background inside the card and a slightly off-tone border for emphasis. Shadows may not translate well into dark mode in case there is not enough contrast between the background of the page and the color of the shadow

Horizontal Card

Horizontal card layouts display collections of similar items efficiently, adapting to responsive design by stacking content vertically on smaller screens.

Boost your conversion rate

by John Doe Mar 16, 2024 6 min read

The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.

<div
  class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-300 bg-gray-50 text-start shadow-lg md:max-w-none md:flex-row dark:border-zinc-800/50 dark:bg-zinc-900 dark:shadow-black"
>
  <div class="flex overflow-hidden md:flex-1">
    <img
      src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="object-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-400"
  >
    <div class="flex flex-col md:gap-y-1">
      <h3
        class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
      >
        Boost your conversion rate
      </h3>
      <div
        class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
      >
        <a href="#" class="hover:underline"> by John Doe </a>
        <span aria-hidden="true">&middot;</span>
        <time datetime="2024-03-16">Mar 16, 2024</time>
        <span aria-hidden="true">&middot;</span>
        <span>6 min read</span>
      </div>

      <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
        The top 10 techniques for boosting your conversion rate. Use these
        techniques to increase your conversion rate and grow your business.
      </p>
      <a
        href="#"
        class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
      >
        <span>Read More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </svg>
      </a>
    </div>
  </div>
</div>

---
const post = {
  title: "Boost your conversion rate",
  href: "#",
  description:
    "The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.",
  date: "Mar 16, 2024",
  datetime: "2020-03-16",
  imageUrl:
    "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
  readingTime: "6 min",
  author: {
    name: "John Doe",
    href: "#",
  },
}; /* You can accept this data as props to the component like this : const { post } = Astro.props; to make it dynamic and resusable */
---

<div
  class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-300 bg-gray-50 text-start shadow-xl md:max-w-none md:flex-row dark:border-zinc-800/50 dark:bg-zinc-900 dark:shadow-black"
>
  <div class="flex overflow-hidden md:flex-1">
    <img
      src={post.imageUrl}
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="object-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between space-y-6 px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-400"
  >
    <div class="flex flex-col md:gap-y-1">
      <h3
        class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
      >
        {post.title}
      </h3>
      <div
        class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
      >
        <a href={post.author.href} class="hover:underline">
          by {post.author.name}
        </a>
        <span aria-hidden="true">&middot;</span>
        <time datetime={post.datetime}>{post.date}</time>
        <span aria-hidden="true">&middot;</span>
        <span>{post.readingTime} read</span>
      </div>
    </div>
    <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
      {post.description}
    </p>
    <a
      href="#"
      class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
    >
      <span>Read More</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg>
    </a>
  </div>
</div>

Note: The card is responsive out of the box and goes from a horizontal layout to a vertical layout lower than the md breakpoint.

Features Card

A card for showcasing features or benefits of a product or service. It can be used to catch the user’s attention.

Quick Delivery

Lightning fast delivery with our reliable delivery team.

24 x 7 Support

Always available 24 x 7 support to help you with any issues you may have.

Customizable Pricing

Customizable pricing packages tailored to your business needs.

Insured Packages

Insure your business with our insurance packages.

<!-- Grid container For the cards-->
<div class="grid grid-cols-1 gap-5 text-start md:grid-cols-2">
  <!-- Cards -->
  <!---Card 1 Start--->
  <div
    class="flex flex-col justify-between rounded-lg border border-zinc-400 px-6 py-4 dark:border-zinc-800"
  >
    <div class="flex flex-col gap-y-1 text-indigo-800 dark:text-indigo-400">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M19 7c0-1.1-.9-2-2-2h-3v2h3v2.65L13.52 14H10V9H6c-2.21 0-4 1.79-4 4v3h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4.48L19 10.35zM7 17c-.55 0-1-.45-1-1h2c0 .55-.45 1-1 1"
        ></path>
        <path
          fill="currentColor"
          d="M5 6h5v2H5zm14 7c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3m0 4c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">
        <span>Quick Delivery</span>
      </h3>
    </div>
    <p class="my-3 text-base text-zinc-800 dark:text-zinc-300">
      Lightning fast delivery with our reliable delivery team.
    </p>
  </div>
  <!---Card 2 Start--->
  <div
    class="flex flex-col justify-between rounded-lg border border-gray-300 bg-gray-200 px-6 py-4 text-zinc-950 dark:border-zinc-800/50 dark:bg-zinc-900 dark:text-zinc-400"
  >
    <div class="flex flex-col gap-y-1 text-zinc-950 dark:text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28c-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"
        ></path>
        <circle cx="9" cy="13" r="1" fill="currentColor"></circle>
        <circle cx="15" cy="13" r="1" fill="currentColor"></circle>
        <path
          fill="currentColor"
          d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">24 x 7 Support</h3>
    </div>
    <p class="my-3 text-base text-zinc-800 dark:text-zinc-300">
      Always available 24 x 7 support to help you with any issues you may have.
    </p>
  </div>
  <!---Card 3 Start--->
  <div
    class="flex flex-col justify-between rounded-lg bg-indigo-700 px-6 py-4 dark:bg-indigo-800"
  >
    <div class="flex flex-col gap-y-1 text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M12 13V9c0-.55-.45-1-1-1H7V6h5V4H9.5V3h-2v1H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h4v2H5v2h2.5v1h2v-1H11c.55 0 1-.45 1-1m7.59-.48l-5.66 5.65l-2.83-2.83l-1.41 1.42L13.93 21L21 13.93z"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">
        <span>Customizable Pricing</span>
      </h3>
    </div>
    <p class="my-3 text-base text-zinc-100">
      Customizable pricing packages tailored to your business needs.
    </p>
  </div>
  <!---Card 4 Start--->
  <div class="flex flex-col justify-between px-6 py-4">
    <div class="flex flex-col text-indigo-700 dark:text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M4 4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2v1h2v-1h11v1h2v-1a2 2 0 0 0 2-2v-1h1v-2h-1V9h1V7h-1V6a2 2 0 0 0-2-2zm0 2h15v11H4zm9.5 1.5a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4M5 9v5h2V9zm8.5.5a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"
        ></path>
      </svg>
    </div>
    <h3
      class="text-xl font-semibold text-indigo-700 lg:text-2xl dark:text-zinc-50"
    >
      Insured Packages
    </h3>
    <p class="my-2 text-base text-zinc-800 dark:text-zinc-300">
      Insure your business with our insurance packages.
    </p>
  </div>
  <!-- End of Cards -->
</div>

<!-- Grid container For the cards-->
<div class="grid grid-cols-1 gap-5 text-start md:grid-cols-2">
  <!-- Cards -->
  <!---Card 1 Start--->
  <div
    class="flex flex-col justify-between rounded-lg border border-zinc-400 px-6 py-4 dark:border-zinc-800"
  >
    <div class="flex flex-col gap-y-1 text-indigo-800 dark:text-indigo-400">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M19 7c0-1.1-.9-2-2-2h-3v2h3v2.65L13.52 14H10V9H6c-2.21 0-4 1.79-4 4v3h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4.48L19 10.35zM7 17c-.55 0-1-.45-1-1h2c0 .55-.45 1-1 1"
        ></path>
        <path
          fill="currentColor"
          d="M5 6h5v2H5zm14 7c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3m0 4c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">
        <span>Quick Delivery</span>
      </h3>
    </div>
    <p class="my-3 text-base text-zinc-800 dark:text-zinc-300">
      Lightning fast delivery with our reliable delivery team.
    </p>
  </div>
  <!---Card 2 Start--->
  <div
    class="flex flex-col justify-between rounded-lg border border-gray-300 bg-gray-200 px-6 py-4 text-zinc-950 dark:border-zinc-800/50 dark:bg-zinc-900 dark:text-zinc-400"
  >
    <div class="flex flex-col gap-y-1 text-zinc-950 dark:text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28c-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"
        ></path>
        <circle cx="9" cy="13" r="1" fill="currentColor"></circle>
        <circle cx="15" cy="13" r="1" fill="currentColor"></circle>
        <path
          fill="currentColor"
          d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">24 x 7 Support</h3>
    </div>
    <p class="my-3 text-base text-zinc-800 dark:text-zinc-300">
      Always available 24 x 7 support to help you with any issues you may have.
    </p>
  </div>
  <!---Card 3 Start--->
  <div
    class="flex flex-col justify-between rounded-lg bg-indigo-700 px-6 py-4 dark:bg-indigo-800"
  >
    <div class="flex flex-col gap-y-1 text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M12 13V9c0-.55-.45-1-1-1H7V6h5V4H9.5V3h-2v1H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h4v2H5v2h2.5v1h2v-1H11c.55 0 1-.45 1-1m7.59-.48l-5.66 5.65l-2.83-2.83l-1.41 1.42L13.93 21L21 13.93z"
        ></path>
      </svg>
      <h3 class="text-xl font-semibold lg:text-2xl">
        <span>Customizable Pricing</span>
      </h3>
    </div>
    <p class="my-3 text-base text-zinc-100">
      Customizable pricing packages tailored to your business needs.
    </p>
  </div>
  <!---Card 4 Start--->
  <div class="flex flex-col justify-between px-6 py-4">
    <div class="flex flex-col text-indigo-700 dark:text-zinc-50">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M4 4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2v1h2v-1h11v1h2v-1a2 2 0 0 0 2-2v-1h1v-2h-1V9h1V7h-1V6a2 2 0 0 0-2-2zm0 2h15v11H4zm9.5 1.5a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4M5 9v5h2V9zm8.5.5a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"
        ></path>
      </svg>
    </div>
    <h3
      class="text-xl font-semibold text-indigo-700 lg:text-2xl dark:text-zinc-50"
    >
      Insured Packages
    </h3>
    <p class="my-2 text-base text-zinc-800 dark:text-zinc-300">
      Insure your business with our insurance packages.
    </p>
  </div>
  <!-- End of Cards -->
</div>

Design Hints

Using cards for features is an effective way to reduce cognitive load while disclosing the important information required for a user to make a decision. The cards given above are different styles of cards. The recommended approach is to use only one type of card for similar information being given to a user.

Stylized Cards

These are a set of stylized cards that can be used to add a bit of flair to your website. While they can be effective in certain situations, it is important to consider how well they will work with your design and layout.

Gradient Card

A card with a gradient background. The gradient used is subtle and non distracting, making it a great choice for a simple and clean look.

Boost your conversion rate

by John Doe Mar 16, 2024 6 min read

The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.

<div
  class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-300 bg-gradient-to-b from-white via-white to-gray-200 text-start shadow-lg md:max-w-none md:flex-row dark:border-zinc-900 dark:from-zinc-900 dark:via-zinc-900 dark:to-zinc-950 dark:shadow-black"
>
  <div
    class="flex overflow-hidden border-b border-gray-300 md:flex-1 lg:border-r dark:border-0"
  >
    <img
      src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="object-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-300"
  >
    <div class="flex flex-col md:gap-y-1">
      <h3
        class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
      >
        Boost your conversion rate
      </h3>
      <div
        class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
      >
        <a href="#" class="hover:underline"> by John Doe </a>
        <span aria-hidden="true">&middot;</span>
        <time datetime="2024-03-16">Mar 16, 2024</time>
        <span aria-hidden="true">&middot;</span>
        <span>6 min read</span>
      </div>

      <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
        The top 10 techniques for boosting your conversion rate. Use these
        techniques to increase your conversion rate and grow your business.
      </p>
      <a
        href="#"
        class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
      >
        <span>Read More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </svg>
      </a>
    </div>
  </div>
</div>

---
const post = {
  title: "Boost your conversion rate",
  href: "#",
  description:
    "The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.",
  date: "Mar 16, 2024",
  datetime: "2020-03-16",
  imageUrl:
    "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
  readingTime: "6 min",
  author: {
    name: "John Doe",
    href: "#",
  },
}; /* You can accept this data as props to the component like this : const { post } = Astro.props; to make it dynamic and resusable */
---

<div
  class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-300 bg-gradient-to-b from-white via-white to-gray-200 text-start shadow-lg md:max-w-none md:flex-row dark:border-zinc-900 dark:from-zinc-900 dark:via-zinc-900 dark:to-zinc-950 dark:shadow-black"
>
  <div
    class="flex overflow-hidden border-b border-gray-300 md:flex-1 lg:border-r dark:border-0"
  >
    <img
      src={post.imageUrl}
      width="600"
      alt="A desk with PC peripherals and Stationery on it"
      class="object-cover"
    />
  </div>
  <div
    class="flex flex-col justify-between px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-300"
  >
    <div class="flex flex-col md:gap-y-1">
      <h3
        class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
      >
        {post.title}
      </h3>
      <div
        class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
      >
        <a href={post.author.href} class="hover:underline">
          by {post.author.name}
        </a>
        <span aria-hidden="true">&middot;</span>
        <time datetime={post.datetime}>{post.date}</time>
        <span aria-hidden="true">&middot;</span>
        <span>{post.readingTime} read</span>
      </div>
    </div>
    <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
      {post.description}
    </p>
    <a
      href="#"
      class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
    >
      <span>Read More</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg>
    </a>
  </div>
</div>

Design Hints

While the gradient card may enhance the looks of your website, if it doesn't match the overall design of your website, it will stick out like a sore thumb and detract from the user experience. It is important to consider the design and layout of your website when choosing a card type and ensure that it complements the rest of the content on the page. If you decide to change the gradient colors, make sure to check for contrast between the background and the text to ensure readability. And since it's a large element, its recommended to keep the gradient subtle.

Glass Card

A card with a glass effect.

Warning: While it may look good, it can be difficult to read the text on a glass card. Be sure to check the contrast between the background and the text to ensure readability. It can also create a lot of edge cases where the user is unable to read the content inside the card based on the page background. Use with caution.

Boost your conversion rate

by John Doe Mar 16, 2024 6 min read

The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.

<!--Background Gradient To Show Glass Effect -->
<div
  class="grid justify-center bg-gradient-to-br from-indigo-100 via-green-100 to-red-100 p-6 dark:bg-gradient-to-tl dark:from-indigo-950 dark:via-slate-900 dark:to-zinc-900"
>
  <!-- Card Component Below -->
  <div
    class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-400 text-start shadow-lg shadow-gray-300/80 backdrop-blur-3xl md:max-w-none md:flex-row dark:border-zinc-600 dark:shadow-zinc-950/50"
  >
    <div
      class="flex overflow-hidden border-b border-gray-300 md:flex-1 lg:border-r dark:border-0"
    >
      <img
        src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
        width="600"
        alt="A desk with PC peripherals and Stationery on it"
        class="object-cover"
      />
    </div>
    <div
      class="flex flex-col justify-between px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-300"
    >
      <div class="flex flex-col md:gap-y-1">
        <h3
          class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
        >
          Boost your conversion rate
        </h3>
        <div
          class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
        >
          <a href="#" class="hover:underline"> by John Doe </a>
          <span aria-hidden="true">&middot;</span>
          <time datetime="2024-03-16">Mar 16, 2024</time>
          <span aria-hidden="true">&middot;</span>
          <span>6 min read</span>
        </div>

        <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
          The top 10 techniques for boosting your conversion rate. Use these
          techniques to increase your conversion rate and grow your business.
        </p>
        <a
          href="#"
          class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
        >
          <span>Read More</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              fill="currentColor"
              d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
          </svg>
        </a>
      </div>
    </div>
    <!-- Card Component Ends Here -->
  </div>
</div>

---
const post = {
  title: "Boost your conversion rate",
  href: "#",
  description:
    "The top 10 techniques for boosting your conversion rate. Use these techniques to increase your conversion rate and grow your business.",
  date: "Mar 16, 2024",
  datetime: "2020-03-16",
  imageUrl:
    "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
  readingTime: "6 min",
  author: {
    name: "John Doe",
    href: "#",
  },
}; /* You can accept this data as props to the component like this : const { post } = Astro.props; to make it dynamic and resusable */
---

<!--Background Gradient To Show Glass Effect -->
<div
  class="grid justify-center bg-gradient-to-br from-indigo-100 via-green-100 to-red-100 p-6 dark:bg-gradient-to-tl dark:from-indigo-950 dark:via-slate-900 dark:to-zinc-900"
>
  <!-- Card Component Below -->
  <div
    class="flex max-w-sm flex-col overflow-hidden rounded-lg border border-gray-400 text-start shadow-lg shadow-gray-300/80 backdrop-blur-3xl md:max-w-none md:flex-row dark:border-zinc-600 dark:shadow-zinc-950/50"
  >
    <div
      class="flex overflow-hidden border-b border-gray-300 md:flex-1 lg:border-r dark:border-0"
    >
      <img
        src={post.imageUrl}
        width="600"
        alt="A desk with PC peripherals and Stationery on it"
        class="object-cover"
      />
    </div>
    <div
      class="flex flex-col justify-between px-6 py-3 text-zinc-950 md:flex-1 dark:text-zinc-300"
    >
      <div class="flex gap-y-1 md:flex-col">
        <h3
          class="mt-2 text-lg font-semibold text-indigo-800 lg:text-xl dark:text-zinc-100"
        >
          {post.title}
        </h3>
        <div
          class="mt-1 flex flex-row space-x-1 text-sm text-zinc-600 dark:text-zinc-400"
        >
          <a href={post.author.href} class="hover:underline">
            by {post.author.name}
          </a>
          <span aria-hidden="true">&middot;</span>
          <time datetime={post.datetime}>{post.date}</time>
          <span aria-hidden="true">&middot;</span>
          <span>{post.readingTime} read</span>
        </div>
      </div>
      <p class="mt-4 text-sm text-zinc-800 lg:text-base dark:text-zinc-300">
        {post.description}
      </p>
      <a
        href="#"
        class="mb-2 mt-4 inline-flex max-w-max items-center gap-x-2 rounded-lg bg-indigo-800 px-4 py-2.5 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:text-base dark:outline-white"
      >
        <span>Read More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </svg>
      </a>
    </div>
  </div>
  <!-- Card Component Ends Here -->
</div>

Note: The card itself uses backdrop-blur-3xl class to create a glass effect. The glass card maybe easier to use than a gradient card since it automatically adjusts to the background color of the website. It is important to check the contrast between the text on the card and the background to ensure that it is easy to read. If you use bg-fixed class on the background of the page, the glass card can be very distracting for a user and may create scenarios where the user is unable to read the content on the page.

Design Hints

The glass card is a great option for websites with a light or pastel color scheme. It can add a touch of elegance and sophistication to your website without being too distracting. However, it's important to keep in mind that the glass card may not work well for all websites especially if the contrast between the content and the background is not high enough. From a user experience perspective, the glass card can be very tricky to use since it's readability is effected based on the background which can be difficult to predict.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Card	Yes	Yes	Yes	Yes	Yes
Horizontal Card	Yes	Yes	Yes	Yes	Yes
Features Card	Yes	Yes	Yes	Yes	Yes
Gradient Card	Yes	Yes	Yes	Yes	Yes
Glass Card	Yes	Yes	Yes	Yes	Yes
Yes

There are no clear accessibility guidelines for the cards pattern described by WAI-ARIA, so ravixUI implements basic accessbility patterns applicable to all elements present inside the cards while adhering to the WCAG 2.1 AA standard.

While the cards out of the box in ravixUI showcase action buttons inside the cards, it’s possible that the card itself can act as an action button based on context, for example, catalogs having product cards that can be clicked to view the product details or genres in a music application having a card for each genre that can be clicked to view songs of the genre.