---
title: "Card"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Card with header, body, and footer sections. Supports image overlays, horizontal layouts, and theme variants for product and content containers."
url: https://frutjam.com/tr/components/card
---

# Card Component

Kart bileşenleri, ilgili bilgileri görsel olarak uyumlu tek bir ünitede birleştiren çok yönlü kaplardır. Anlamsal HTML ve esnek içerik alanlarıyla oluşturulan kartlar, içeriği hiyerarşik olarak düzenler ve çeşitli düzenlere uyum sağlar. Frutjam kart sistemi, ürün vitrinleri, blog gönderileri, referanslar ve gösterge tablosu öğeleri için birden fazla renk çeşidi, boyut ve stil sunar.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf          | Tip         | Tanım                                                 |
| -------------- | ----------- | ----------------------------------------------------- |
| card           | Temel       | Yuvarlatılmış köşelere sahip yükseltilmiş içerik kabı |
| card-outline   | Stil        | Görünür kenarlıklı şeffaf dolgu                       |
| card-dashed    | Stil        | Kesikli kenarlık stili                                |
| card-title     | Değiştirici | Kartın içindeki başlık öğesi                          |
| card-content   | Değiştirici | Kartın yastıklı içerik alanı                          |
| card-actions   | Değiştirici | Düğmeler ve eylem kontrolleri için alt bilgi alanı    |
| card-xs        | Boyut       | Ekstra küçük dolgu                                    |
| card-sm        | Boyut       | Küçük dolgu                                           |
| card-md        | Boyut       | Orta dolgu (varsayılan)                               |
| card-lg        | Boyut       | Büyük dolgu                                           |
| card-xl        | Boyut       | Ekstra büyük dolgu                                    |
| card-primary   | Renk        | Birincil tema rengi                                   |
| card-secondary | Renk        | İkincil tema rengi                                    |
| card-accent    | Renk        | Vurgu teması rengi                                    |
| card-neutral   | Renk        | Nötr tema rengi                                       |
| card-info      | Renk        | Bilgi anlamsal rengi                                  |
| card-success   | Renk        | Başarı anlamsal rengi                                 |
| card-warning   | Renk        | Uyarı anlamsal rengi                                  |
| card-error     | Renk        | Hata anlamsal rengi                                   |

## Temel Kullanım

## Eylemleri İçeren Kart

Düğmeler ve eylem kontrolleri için alt bilgi alanı eklemek üzere `card-actions`'ı kullanın.

```html
<div class="card card-md shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>A card with an actions footer for user interactions like buttons and links.</p>
    <div class="card-actions">
      <button class="btn btn-primary">Accept</button>
      <button class="btn">Dismiss</button>
    </div>
  </div>
</div>
```

## Kart Boyutları

Farklı içerik yoğunluklarına ve kullanım durumlarına uyacak beş boyut çeşidi arasından seçim yapın.

```html
<div class="card card-xs card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Small</h2>
    <p>Compact card for minimal content.</p>
  </div>
</div>

<div class="card card-sm card-outline">
  <div class="card-content">
    <h2 class="card-title">Small</h2>
    <p>Small card for condensed information.</p>
  </div>
</div>

<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Medium</h2>
    <p>Medium card for standard content.</p>
  </div>
</div>

<div class="card card-lg card-outline">
  <div class="card-content">
    <h2 class="card-title">Large</h2>
    <p>Large card for prominent content display.</p>
  </div>
</div>

<div class="card card-xl card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Large</h2>
    <p>Extra large card for expansive content layouts.</p>
  </div>
</div>
```

## Kart Renkleri

Görsel farklılaşma ve anlamsal anlam için kartlara renk çeşitleri uygulayın.

```html
<div class="card card-md">
  <div class="card-content">
    <h2 class="card-title">Default</h2>
    <p>Base card color using default theme background.</p>
  </div>
</div>

<div class="card card-md card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary</h2>
    <p>Primary color card for featured content.</p>
  </div>
</div>

<div class="card card-md card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary</h2>
    <p>Secondary color card for supporting content.</p>
  </div>
</div>

<div class="card card-md card-accent">
  <div class="card-content">
    <h2 class="card-title">Accent</h2>
    <p>Accent color card for emphasis.</p>
  </div>
</div>

<div class="card card-md card-info">
  <div class="card-content">
    <h2 class="card-title">Info</h2>
    <p>Information card for helpful content.</p>
  </div>
</div>

<div class="card card-md card-success">
  <div class="card-content">
    <h2 class="card-title">Success</h2>
    <p>Success card for positive outcomes.</p>
  </div>
</div>

<div class="card card-md card-warning">
  <div class="card-content">
    <h2 class="card-title">Warning</h2>
    <p>Warning card for caution messages.</p>
  </div>
</div>

<div class="card card-md card-error">
  <div class="card-content">
    <h2 class="card-title">Error</h2>
    <p>Error card for error notifications.</p>
  </div>
</div>

<div class="card card-md card-neutral">
  <div class="card-content">
    <h2 class="card-title">Neutral</h2>
    <p>Neutral card for balanced design.</p>
  </div>
</div>
```

## Özel Arka Plan ve Metin Rengi

Tam renk kontrolü için herhangi bir Tailwind arka planını ve metin rengi yardımcı programını doğrudan kartta kullanın.

```html
<div class="card bg-primary text-on-primary w-88">
  <div class="card-content">
    <h2 class="card-title">Custom Colors</h2>
    <p>Apply any background and text color using Tailwind utilities.</p>
  </div>
</div>
```

## Kart Stilleri

Görsel ayrım için kartlara farklı kenarlık ve stil çeşitleri uygulayın.

### Anahat Kartı

```html
<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Outline Style</h2>
    <p>Cards with visible borders for subtle separation from background.</p>
  </div>
</div>

<div class="card card-md card-outline card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary Outline</h2>
    <p>Outline card with primary color border.</p>
  </div>
</div>
```

### Kesikli Kart

```html
<div class="card card-md card-dashed">
  <div class="card-content">
    <h2 class="card-title">Dashed Style</h2>
    <p>Cards with dashed borders for visual interest.</p>
  </div>
</div>

<div class="card card-md card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary Dashed</h2>
    <p>Dashed card with secondary color border.</p>
  </div>
</div>
```

## Resimli Kartlar

Görsel öğeler içeren içerik için kartları şekillerle birleştirin.

### Resim Üstte

```html
<div class="card card-md w-88 shadow-sm">
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=600&height=400" alt="Blog Post" loading="lazy" />
  </figure>
  <div class="card-content">
    <h2 class="card-title">Blog Post Card</h2>
    <p>Display articles with featured images, titles, and summaries for content discovery.</p>
  </div>
</div>
```

### Resim Altta

```html
<div class="card card-md w-88 shadow-sm">
  <div class="card-content">
    <h2 class="card-title">Image Below Content</h2>
    <p>Place images after content for reverse visual hierarchy.</p>
  </div>
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-3.jpg?format=webp&width=600&height=400" alt="Footer Image" loading="lazy" />
  </figure>
</div>
```

## Fiyatlandırma Kartı

Özellikler ve harekete geçirici mesaj düğmeleriyle fiyatlandırma katmanlarını sergileyin.

```html
<div class="card card-lg card-outline">
  <div class="card-content gap-4">
    <div>
      <h2 class="card-title">Startup Plan</h2>
      <div class="flex items-baseline gap-2">
        <span class="text-3xl font-bold">$49</span>
        <span class="text-sm text-on-base/60">/month</span>
      </div>
    </div>
    <div class="divider my-0"></div>
    <ul class="flex flex-col gap-3">
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>25 websites</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>150 templates</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>Advanced eCommerce</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-error badge-sm opacity-50">✗</span>
        <span class="opacity-50">Unlimited storage</span>
      </li>
    </ul>
    <button class="btn btn-primary w-full">Get Started</button>
  </div>
</div>
```

## Duyarlı Kart Düzeni

Farklı ekran boyutlarına uyum sağlayan esnek kart düzenleri oluşturun.

```html
<div class="card card-lg w-160 shadow-sm">
  <div class="grid grid-cols-12 gap-0">
    <div class="col-span-12 lg:col-span-5">
      <figure class="h-64">
        <picture>
          <source media="(max-width: 1024px)" srcset="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=640&height=427">
          <img src="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=600&height=400" alt="Layout Image" class="w-full h-full object-cover" loading="lazy" />
        </picture>
      </figure>
    </div>
    <div class="col-span-12 lg:col-span-7">
      <div class="card-content">
        <h2 class="card-title">Responsive Layout</h2>
        <p>On desktop, image and content display side by side. On mobile, they stack vertically for optimal viewing experience.</p>
      </div>
    </div>
  </div>
</div>
```

## Kombine Varyantlar

Özel kart tasarımları için boyut, renk ve stil çeşitlerini karıştırıp eşleştirin.

```html
<div class="card card-lg card-primary card-outline">
  <div class="card-content">
    <h2 class="card-title">Large Primary Outline</h2>
    <p>Combination of large size, primary color, and outline style.</p>
  </div>
</div>

<div class="card card-sm card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Small Secondary Dashed</h2>
    <p>Compact card with dashed border in secondary color.</p>
  </div>
</div>

<div class="card card-xl card-accent">
  <div class="card-content">
    <h2 class="card-title">Extra Large Accent</h2>
    <p>Prominent card with accent color for feature display.</p>
  </div>
</div>
```