Kart

<armada:card title="Proje ayarları" description="Bu ayarlar tüm ekip üyelerini etkiler." style="max-width:520px">
    <x-slot:actions>
        <armada:button variant="ghost" size="sm" icon="ellipsis" aria-label="Diğer" />
    </x-slot:actions>

    <armada:text>Proje adı, varsayılan bölge ve bildirim tercihleri burada yönetilir.</armada:text>

    <x-slot:footer class="arm-card__footer--end">
        <armada:button>Vazgeç</armada:button>
        <armada:button variant="solid" tone="primary">Kaydet</armada:button>
    </x-slot:footer>
</armada:card>

<div class="arm-grid" style="--min: 180px">
    <armada:card title="Default">Gölge ve çerçeve</armada:card>
    <armada:card variant="flat" title="Flat">Düz yüzey</armada:card>
    <armada:card variant="elevated" title="Elevated">Yüksek gölge</armada:card>
    <armada:card variant="outline" title="Outline">Sadece çerçeve</armada:card>
    <armada:card tone="primary" title="Ton: primary">Vurgulu</armada:card>
    <armada:card tone="danger" title="Ton: danger" icon="triangle-alert">Tehlikeli bölge</armada:card>
</div>

<div class="arm-grid" style="--min: 240px">
    <armada:card media="/img/mountains.svg" title="Kapadokya turu" description="3 gün · 2 gece">
        <div class="sc-row" style="justify-content:space-between">
            <armada:text variant="strong">₺7.450</armada:text>
            <armada:rating :value="4" readonly size="16px" />
        </div>
    </armada:card>
    <armada:card media="/img/ocean.svg" ratio="4/3" href="#" title="Tıklanabilir kart" description="Tüm kart bir link" />
</div>
<armada:card horizontal media="/img/forest.svg" title="Yatay kart" description="Görsel solda" style="margin-top:16px">
    Liste görünümleri için ideal. Telefonda görsel üste geçer.
    <x-slot:footer>
        <armada:button size="sm" icon="heart">Beğen</armada:button>
        <armada:button size="sm" variant="ghost" icon="share-2">Paylaş</armada:button>
    </x-slot:footer>
</armada:card>

<div class="arm-grid" style="--min: 220px">
    <armada:card icon="shield-check" tone="success" title="İki adımlı doğrulama" description="Açık" selected />
    <armada:card icon="key-round" title="API anahtarları" description="3 aktif anahtar" />
    <armada:card icon="webhook" tone="purple" title="Webhook'lar" description="Yapılandırılmadı" />
</div>

<armada:card title="Son siparişler" flush style="max-width:560px">
    <x-slot:actions><armada:button size="sm" variant="ghost" icon-trailing="arrow-right">Tümü</armada:button></x-slot:actions>
    <armada:list variant="divided">
        <armada:list.item title="#1042 · Elif Kaya" subtitle="2 ürün" trailing="₺1.240" />
        <armada:list.item title="#1041 · Mert Demir" subtitle="1 ürün" trailing="₺399" />
        <armada:list.item title="#1040 · Zeynep Ak" subtitle="4 ürün" trailing="₺2.870" />
    </armada:list>
</armada:card>