Card, Feature Grid ve Stat Card
Amaç: Bir kartı düzgün kurmak ve karta benzeyen üç bloktan hangisini gerçekten istediğinizi bilmek.
Süre: 5 dakika
Gerekenler: Bir sayfa, tercihen kartları koyacağınız bir Grid ile
Adımlar
- Add Block seçin, Card seçin, ona bir Name ve bir Card style verin.
- Tek başına bir Card hiçbir şey render etmez. Card satırında Add child block seçin ve Card Header, Card Body, Card Footer ekleyin. Bu bölgelerin kendi alanları yoktur — onlar birer kapsayıcıdır.
- Her bölgenin içine içerik ekleyin: başlığa bir Header, gövdeye bir Plain Text, alt bölgeye bir Button Link.
- Kısa özellik cümlelerinden oluşan bir dizi için Add Block seçip Feature Grid seçin, ardından Feature Item çocukları ekleyin.
- Öne çıkarmaya değer bir sayı için Stat Card seçin: Value sayıdır, Eyebrow / Label üstündeki küçük satır, Description ise altındaki cümledir.
Hangisi?
- Card — birimin gerçek içeriğe ihtiyacı var: bir başlık, bir paragraf, bir görsel, bir eylem. Onu siz kurarsınız.
- Feature Grid — üç ila altı kısa "şunu yapıyoruz" cümlesi; her birini tek tek kurmadan tekdüze.
- Stat Card — içeriğin kendisi bir sayı. Tek değer, tek etiket, tek cümle.
Notlar
- Card bölgeleri üst seviye blok seçicide sunulmaz. Yalnızca bir Card'ın içinde bulunurlar; Card satırındaki Add child block bu yüzden tek giriş yoludur.
- Üç bölgenin hepsine ihtiyacınız yok. Yalnızca gövdesi olan bir Card gayet iyidir; hiçbir şeyi olmayan bir Card ise görünmezdir.
- Card içinde Card anlamlı biçimde iç içe geçmez. Kart ızgarası istiyorsanız Card'ları bir Grid'in içine koyun.
- Feature Grid daha hızlı ve daha az esnek yoldur. Onunla boğuşmaya başladığınızda aslında Card istiyordunuz.
- Kart metinlerini benzer uzunlukta tutun. Üç cümlelik bir kartın yanındaki beş kelimelik iki kart, bozuk olmasa bile bozuk görünür.
Card'ın tamamını tıklanabilir yapın
<p>Tüm kart alanı tek bir hedefi açacaksa Card link hedefini ayarlayın. Renderer, içteki kontrolleri kullanılabilir tutar ve geçersiz iç içe link üretmez. Eylemin kendi etiketi gerekiyorsa veya Card birden fazla hedef içeriyorsa footer içinde Button Link kullanın.</p>