Cards

Cards contain content and actions that relate information about a subject.

Outlined Card

Elevated Card

Filled Card

Cards types

There are three types of cards: elevated, filled, and outlined. Each provides the same legibility and functionality, so the type you use depends on style alone.

                
  <!-- outlined card  -->
  <div class="rounded-xl bg-neutral-10 dark:bg-neutral-900 border border-gray-200 dark:border-gray-700">
  <p>Outlined Card</p>
  </div>

  <!-- elevated card -->
  <div class="rounded-xl bg-surface-100 dark:bg-surfacedark-100 shadow-lg dark:shadow-gray-50/10">
  <p>Elevated Card</p>
  </div>

  <!-- filled card  -->
  <div class="rounded-xl bg-gray-100 dark:bg-gray-700">
  <p>Filled Card</p>
  </div>

Cards Usage

Use a card to display content and actions on a single topic. Cards should be easy to scan for relevant and actionable information. Elements like text and images should be placed on cards in a way that clearly indicates hierarchy.

A

Heading

Subheading

title image

Title

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

A

Heading

Subheading

title image

Title

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

A

Heading

Subheading

title image

Title

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

              
<!-- filled card  -->
<div class="w-full max-w-[360px] h-auto rounded-xl bg-gray-100 dark:bg-gray-700 flex flex-col">
  <!-- header -->
  <div class="flex flex-row justify-between items-center py-3 px-4">
    <div class="flex flex-row items-center gap-4">
      <div class="w-10 h-10 flex items-center justify-center rounded-full title-md font-bold bg-primary-600 text-white">A</div>
      <div class="flex flex-col">
        <h3 class="title-md text-gray-900 dark:text-gray-100">Heading</h3>
        <p class="text-body-md">Subheading</p>
      </div>
    </div>
    <!-- action -->
    <div class="w-12 h-12 flex items-center justify-center">
      <button class="relative flex flex-row items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-full text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
        <span class="material-symbols-outlined font-bold">more_vert</span>
      </button>
    </div>
  </div>
  <!-- image -->
  <img src="../src/img/media/media.png" alt="title image" class="max-w-full w-full">
  <!-- content -->
  <div class="p-4 flex flex-col gap-4">
    <div class="flex flex-col">
      <h3 class="text-title-lg text-gray-900 dark:text-gray-100">Title</h3>
      <span class="text-body-md">Subhead</span>
    </div>
    <p class="text-body-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
    <div class="flex flex-row justify-end items-center gap-3">
       <button class="btn-outline relative flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-full text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
        Enabled
      </button>

      <button class="btn relative flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-full hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
        Enabled
      </button>
    </div>
  </div>
</div>