Card

Ne zaman kullanılır

Card, tek bir konuya ait bilgileri ve işlemleri bir arada gösterir: panodaki bir özet, bir ayar grubu, bir kayda giden bağlantı. Kartlar genellikle ızgarada yan yana durur ve kullanıcı aralarında göz gezdirir.

Ne zaman kullanılmaz

• Bir sayfanın tamamı için: Sayfa zaten bir bölümdür; tüm içeriği tek bir karta koymayın.
• Sayısal bir özet için: Değer, değişim ve eğilim gösteren kutular için StatCard kullanın.
• Satır satır kayıtlar için: Karşılaştırılacak çok sayıda kayıt için Table ya da DataTable kullanın.
• Bir listenin satırları için: Tekrarlanan satırlar için ListItem kullanın; satırları tek tek kartlara koymayın.

Anatomi

1. Kök: yüzey, kenarlık ya da gölge ve 16 px (radius-lg) köşe. Başlığı varsa <section>.
2. Başlık bölümü (Card.Header): başlık, açıklama ve işlem.
3. Başlık (Card.Title): 16 px yarı kalın başlık; varsayılan seviye h3.
4. Açıklama (Card.Description): başlığın altında bir iki satır, ikincil renk.
5. İşlem (Card.Actions): başlık satırının sonunda, isteğe bağlı.
6. İçerik (Card.Body): asıl içerik.
7. Alt bölüm (Card.Footer): işlemler ya da durum ve ikincil bilgi.

Davranış

• Card varsayılan olarak durağandır; üzerine gelince, tıklayınca değişmez ve sekme sırasına girmez.
• interactive kart üzerine gelince 2 px yükselir ve kenarlığı koyulaşır; basılıyken yerine oturur. Azaltılmış harekette yalnızca kenarlık değişir.
• Etkileşimli kartın tek bir bağlantısı vardır (Card.Link); tıklama alanı kartın tamamını kaplar. Diğer işlemler bağlantının üstünde durur ve ayrı sekme duraklarıdır.
• İçerik kartın genişliğine göre satır kırar; Card kendi yüksekliğini içeriğe göre alır. Izgarada eşit yükseklik için ızgara hücresine h-full verin.

Yönergeler

Bir kart, bir konu

Kartın başlığı içindeki her şeyi kapsamalı. İki ayrı konu varsa iki kart kullanın.

Kart başlığı

Kart içeriği burada yer alır.

YapınBaşlık ve içerik aynı konuyu anlatıyor.

Kart başlığı

Kart başlığı

YapmayınBir kartın içinde ikinci bir kart: hiyerarşi okunmuyor.

Etkileşimli kartta tek hedef

Kartın tamamı tıklanıyorsa bir yeri açmalı. Başka işlemler Card.Actions ya da Card.Footer içinde ayrı durur.

Kart başlığı

Düzenle

YapınKart ayrıntıyı açıyor; düzenle ayrı bir buton.

Kart başlığı

Birinci bağlantıİkinci bağlantı

YapmayınKart tıklanıyor ama içinde iki ayrı bağlantı var: hangisinin açılacağı belirsiz.

Birincil işlem bir tane

Kartın alt bölümünde en fazla bir birincil Button olsun.

Kart başlığı

Birincil butonİkincil buton

YapınBir birincil, bir ikincil işlem.

Kart başlığı

Birincil butonBirincil buton

Yapmayınİki birincil işlem yarışıyor.

Durumu metinle gösterin

Kartın durumunu kenarlık rengiyle değil, Badge ile gösterin.

Kart başlığı

Etkin

YapınDurum Badge'de, metinle.

Kart başlığı

YapmayınDurumu yalnızca kenarlık rengi anlatıyor.

İçerik

• Başlığı bir isim öbeği olarak, cümle düzeninde yazın: “Kart başlığı”, “Bildirim ayarları”.
• Açıklama en fazla iki satır olsun; uzun açıklamayı içeriğe taşıyın.
• Alt bölümdeki Button metni bir fiille başlasın: “Kaydet”, “Ayrıntıları gör”.
• Etkileşimli kartın bağlantı metni başlığın kendisidir; “Buraya tıklayın” ya da “Daha fazla” yazmayın.

Platformlar

• Masaüstü: Kartlar ızgarada 2-4 sütun halinde durur; aynı satırdaki kartlar aynı varyantı kullanır.
• Mobil: 390 px’te kartlar tek sütuna iner; sayfa kenar boşluğu korunur.

İlgili bileşenler

• Badge: Kartın durumunu alt bölümde ya da başlığın yanında gösterir.
• Button: Kartın işlemleri için.
• Grid: Kartları ızgaraya dizmek için.
• StatCard: Sayısal özetler için Card üzerine kurulu kutu.