Card

Overview

Cards contain content and actions about a single subject. They can vary in style and size, are used independently, and can provide a snippet of information to guide the user to another related page.

Default

<div className="p-6 bg-white rounded-2xl border-4 border-transparent dark:bg-gray-800 dark:text-gray-300">
  <div className="h2 mt-0 mb-3 dark:text-white">Basic card</div>
  <div>There is nothing to say and it is being said</div>
</div>
<div className="p-6 bg-white rounded-2xl border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
  <div className="h2 mt-0 mb-3 dark:text-white">Basic card with border</div>
  <div>There is nothing to say and it is being said</div>
</div>
<div className="p-6 bg-white rounded-2xl border-4 border-transparent hover:border-gray-200 ease-in-out duration-200 dark:hover:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
  <div className="h2 mt-0 mb-3 dark:text-white">Basic card with hover</div>
  <div>There is nothing to say and it is being said</div>
</div>

Actions

<a href="#" className="text-gray-900 dark:text-gray-300">
  <div className="pt-6 px-6 pb-20 bg-gray-100 rounded-2xl border-4 border-transparent hover:border-gray-200 ease-in-out duration-200 dark:hover:border-gray-700 dark:bg-gray-800 relative">
    <div className="inline-block mb-3 px-3 py-3 font-semibold rounded-2xl bg-blue-500 text-white text-base">
      <Icon.MessageCircle />
    </div>
    <div className="h2 mt-0 mb-3 dark:text-white">Action card with icon</div>
    <div>There is nowhere to go and we're on our way</div>
    <a
      href="#"
      className="px-3 py-3 font-semibold rounded-full bg-black text-white text-base hover:shadow-3xl hover:shadow-black hover:text-white ease-in-out duration-200 dark:bg-white dark:text-black dark:hover:shadow-white dark:hover:text-black absolute bottom-6 right-6"
    >
      <Icon.ArrowRight />
    </a>
  </div>
</a>

<a href="#" className="text-gray-900 dark:text-gray-300">
  <div className="pt-6 px-6 pb-20 bg-gray-100 rounded-2xl border-4 border-transparent hover:border-gray-200 ease-in-out duration-200 dark:hover:border-gray-700 dark:bg-gray-800 relative">
    <div className="uppercase font-semibold text-sm text-gray-500 mb-0.5 dark:text-gray-400">
      Heading
    </div>
    <div className="h3 mt-0 mb-3 dark:text-white">
      Action card with heading
    </div>
    <div>There is nowhere to go and we're on our way</div>
    <a
      href="#"
      className="px-3 py-3 font-semibold rounded-full bg-black text-white text-base hover:shadow-3xl hover:shadow-black hover:text-white ease-in-out duration-200 dark:bg-white dark:text-black dark:hover:shadow-white dark:hover:text-black absolute bottom-6 right-6"
    >
      <Icon.ArrowRight />
    </a>
  </div>
</a>

<a href="#" className="text-gray-900 dark:text-gray-300">
  <div className="p-0 bg-gray-100 rounded-2xl border-4 border-transparent hover:border-gray-200 ease-in-out duration-200 dark:hover:border-gray-700 dark:bg-gray-800 relative">
    <div className="aspect-square rounded-t-2xl overflow-hidden">
      ![Pre-built UI illustration](/pre-built-ui-themes.svg)
    </div>
    <div className="p-6">
      <div className="uppercase font-semibold text-sm text-gray-500 mb-0.5 dark:text-gray-400">
        1:1 aspect ratio
      </div>
      <div className="h3 mt-0 mb-3 dark:text-white">
        Action card with image
      </div>
      <div>There is nowhere to go and we're on our way</div>
    </div>
  </div>
</a>
<a href="#" className="text-gray-900 dark:text-gray-300">
  <div className="p-0 bg-gray-100 rounded-2xl border-4 border-transparent hover:border-gray-200 ease-in-out duration-200 dark:hover:border-gray-700 dark:bg-gray-800 relative">
    <div className="aspect-[2/1] rounded-t-2xl overflow-hidden">
      ![Pre-built UI illustration](/pre-built-ui-themes-2.svg)
    </div>
    <div className="p-6">
      <div className="uppercase font-semibold text-sm text-gray-500 mb-0.5 dark:text-gray-400">
        2:1 aspect ratio
      </div>
      <div className="h3 mt-0 mb-3 dark:text-white">
        Action card with image
      </div>
      <div>There is nowhere to go and we're on our way</div>
    </div>
  </div>
</a>