Temel kart
İçeriği başlık, işlem alanı ve alt çubukla birlikte beyaz bir yüzeyde toplar. Panellerdeki özetler, listeler ve formlar için temel kaptır; daraltılabilir ve kapatılabilir.
Temel kullanım
title ve subtitle kartın başlık alanını oluşturur; ikisi de isteğe bağlıdır. İçerik varsayılan slot'a yazılır ve iç boşluklu bir gövdede gösterilir.
<acun:card title="Kadıköy deposu" subtitle="IST-04 · 148 sipariş">
<p class="text-sm text-gray-600 dark:text-zinc-400">Bu ay 112 sipariş kargoya verildi, 36 sipariş bekliyor.</p>
</acun:card>| Prop | Değerler |
|---|---|
title | Kart başlığı |
subtitle | Başlığın altındaki kısa açıklama |
Alt çubuk
footer slot'u gövdenin altında, ince bir çizgiyle ayrılmış bir satır açar; içindeki düğmeler yan yana dizilir. Kartla ilgili ana işlemleri buraya koyun.
<acun:card title="Satış raporu" subtitle="Eylül 2026">
<p class="text-sm text-gray-600 dark:text-zinc-400">3.106 sipariş teslim edildi, 214 sipariş iade edildi.</p>
<acun:slot:footer>
<acun:button size="sm">Raporu aç</acun:button>
<acun:button size="sm" variant="ghost">Excel'e aktar</acun:button>
</acun:slot:footer>
</acun:card>| Prop | Değerler |
|---|---|
footer | Slot; alt çubuk |
Eşit yükseklikte kartlar
acun:card dikey bir esnek kutudur ve gövdesi kalan yüksekliği doldurur (flex-1). Izgarada yan yana duran kartlar aynı yüksekliğe uzadığında gövde metinleri farklı uzunlukta olsa da alt çubuklar aynı hizada kalır; ek bir sınıf gerekmez.
<div class="grid gap-4 md:grid-cols-3">
<acun:card title="Kadıköy deposu" subtitle="148 sipariş">
<p class="text-sm text-gray-600 dark:text-zinc-400">36 sipariş kargoya verilmeyi bekliyor.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Siparişleri göster</acun:button></acun:slot:footer>
</acun:card>
<acun:card title="Ankara deposu" subtitle="205 sipariş">
<p class="text-sm text-gray-600 dark:text-zinc-400">Bu ay 198 sipariş kargoya verildi. Yeni kargo anlaşması nedeniyle Perşembe teslim alımları iki saat erken başlıyor; depo ekiplerinin paketleme planını buna göre güncellemesi gerekiyor.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Siparişleri göster</acun:button></acun:slot:footer>
</acun:card>
<acun:card title="İzmir deposu" subtitle="64 sipariş">
<p class="text-sm text-gray-600 dark:text-zinc-400">Tüm siparişler kargoya verildi.</p>
<acun:slot:footer><acun:button size="sm" variant="ghost">Siparişleri göster</acun:button></acun:slot:footer>
</acun:card>
</div>Başlık işlemleri
actions slot'u başlığın sağına yerleşir; rozet, küçük düğme ya da açılır menü koyabilirsiniz. Açılır menülü örnekler İşlemli kartlar sayfasındadır.
<acun:card title="Açık talepler" subtitle="38 talep">
<acun:slot:actions>
<acun:badge variant="success">Güncel</acun:badge>
<acun:button size="sm" variant="ghost">Tümü</acun:button>
</acun:slot:actions>
<p class="text-sm text-gray-600 dark:text-zinc-400">Bugün 12 talep yanıt bekliyor; 3 talep çözüldü.</p>
</acun:card>| Prop | Değerler |
|---|---|
actions | Slot; başlığın sağı |
Daraltma ve kapatma
collapsible başlığa gövdeyi daraltan bir ok, closable kartı gizleyen bir çarpı ekler. İkisi de yalnızca tarayıcıda çalışır; sayfa yenilenince kart yeniden açık gelir.
<div class="grid gap-4 md:grid-cols-2">
<acun:card title="Kargo notları" collapsible>
<p class="text-sm text-gray-600 dark:text-zinc-400">Salı günleri Anadolu yakasında kargo yoğunluğu var; teslimatlar bir gün gecikebilir.</p>
</acun:card>
<acun:card title="Duyuru" closable>
<p class="text-sm text-gray-600 dark:text-zinc-400">Ekim kampanyası 7 Ekim Pazartesi başlıyor. Destek ekibi yeni iade koşullarını incelemeli.</p>
</acun:card>
</div>| Prop | Değerler |
|---|---|
collapsible | true | false |
closable | true | false |
İç boşluksuz
:padding="false" gövdenin iç boşluğunu kaldırır; tablo ve listeler kartın kenarlarına dayanır. Liste için acun:list-group'u flush ile birlikte kullanın.
<acun:card title="Son siparişler" :padding="false">
<acun:list-group flush>
<acun:list-group.item>Ayşe Yılmaz · Kablosuz kulaklık <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">09:42</span></acun:list-group.item>
<acun:list-group.item>Mehmet Kaya · Akıllı saat <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">09:17</span></acun:list-group.item>
<acun:list-group.item>Zeynep Arslan · Laptop çantası <span class="ms-auto text-xs text-gray-500 dark:text-zinc-400">08:55</span></acun:list-group.item>
</acun:list-group>
</acun:card>| Prop | Değerler |
|---|---|
padding | true | false |
Serbest içerik
Başlık vermeden kartı serbest bir yüzey olarak kullanabilirsiniz; karşılama ve özet kartları bu şekilde kurulur.
<acun:card>
<div class="flex flex-wrap items-center justify-between gap-6">
<div class="max-w-md">
<h3 class="text-lg font-semibold text-brand-600 dark:text-brand-400">Günaydın Ayşe 👋</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-zinc-400">Dün 214 sipariş alındı, bu geçen haftanın ortalamasından %18 fazla.</p>
<acun:button size="sm" variant="outline" class="mt-4">Satış raporunu aç</acun:button>
</div>
<acun:icon name="shopping-bag" size="24" stroke="1.2" class="text-brand-200 dark:text-brand-500/30" />
</div>
</acun:card>Parçalı kullanım
Başlıkta metinden fazlası (ikon, rozet, işlem düğmeleri) ya da ayrı biçimlenen bir gövde ve alt çubuk gerekiyorsa kartı acun:card.header, acun:card.body ve acun:card.footer parçalarıyla yazın. İçerik bir parçayla başlayınca kart yalnızca kutusunu çizer; daraltma ve kapatma düğmeleri başlıkta yine çıkar. Başlığa title vermezseniz slot başlığın kendisidir. Katlanabilir bir kartın içine yerleştirdiğiniz parçalı karta :collapsible="false" verin; yoksa içteki başlık dıştaki kartın düğmelerini gösterir.
<acun:card collapsible>
<acun:card.header subtitle="Bugün 486 paket · 3 kargo firması">
<acun:icon name="truck" size="4" class="text-brand-600 dark:text-brand-400" />
Kargo takibi
<acun:badge variant="success">Canlı</acun:badge>
<acun:slot:actions>
<acun:button size="sm" variant="white">
<acun:icon name="arrow-path" size="4" /> Yenile
</acun:button>
</acun:slot:actions>
</acun:card.header>
<acun:card.body>
<dl class="grid grid-cols-3 gap-4 text-sm">
<div>
<dt class="text-gray-500 dark:text-zinc-400">Teslim edilen</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-gray-900 dark:text-zinc-100">312</dd>
</div>
<div>
<dt class="text-gray-500 dark:text-zinc-400">Yolda</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-gray-900 dark:text-zinc-100">158</dd>
</div>
<div>
<dt class="text-gray-500 dark:text-zinc-400">Geciken</dt>
<dd class="mt-1 text-lg font-semibold tabular-nums text-red-600 dark:text-red-400">16</dd>
</div>
</dl>
</acun:card.body>
<acun:card.footer>
<span class="text-xs text-gray-500 dark:text-zinc-400">Son güncelleme 09:42</span>
<acun:button size="sm" variant="soft" class="ms-auto">Kargo raporuna git</acun:button>
</acun:card.footer>
</acun:card>| Prop | Değerler |
|---|---|
acun:card.header | title, subtitle; slot: başlık içeriği · actions slot'u |
acun:card.body | padding (varsayılan true) |
acun:card.footer | Alt çubuk |
Rozetli başlık, kenarsız gövde
title ile birlikte verilen slot başlığa eklenir (ör. bir sayı rozeti). :padding="false" gövdeyi kenarlara kadar açar; liste ve tablolar için uygundur.
<acun:card>
<acun:card.header title="Destek ekibi">
<acun:badge>8 kişi</acun:badge>
</acun:card.header>
<acun:card.body :padding="false">
<ul class="divide-y divide-gray-100 border-t border-gray-100 text-sm dark:divide-zinc-800 dark:border-zinc-800">
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Ahmet Yılmaz</span>
<span class="text-gray-500 dark:text-zinc-400">Faturalama · 42 talep</span>
</li>
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Elif Kaya</span>
<span class="text-gray-500 dark:text-zinc-400">Teknik destek · 37 talep</span>
</li>
<li class="flex items-center justify-between gap-3 px-5 py-3">
<span class="font-medium text-gray-900 dark:text-zinc-100">Murat Demir</span>
<span class="text-gray-500 dark:text-zinc-400">Kargo ve iade · 51 talep</span>
</li>
</ul>
</acun:card.body>
</acun:card>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
title | null | Kart başlığı |
subtitle | null | Başlığın altındaki açıklama |
collapsible | false | Gövdeyi daraltma düğmesi |
closable | false | Kartı gizleme düğmesi |
padding | true | false: gövde iç boşluksuz (tablo, liste) |
card.header: title · subtitle | null | Başlık ve alt satır; title verilmezse slot başlığın kendisidir (ikon, metin, rozet) |
card.body: padding | true | false: gövde iç boşluksuz |