# 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

Subhead

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

A

### Heading

Subheading

### Title

Subhead

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

A

### Heading

Subheading

### 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts