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

  1. Add Block seçin, Card seçin, ona bir Name ve bir Card style verin.
  2. 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.
  3. Her bölgenin içine içerik ekleyin: başlığa bir Header, gövdeye bir Plain Text, alt bölgeye bir Button Link.
  4. 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.
  5. Ö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.
Card block form showing the admin name, card style, and background settings.
Block list showing cards with their header, body, and footer regions nested inside.
Feature Grid form showing title, subtitle, and intro text.
Stat Card form showing eyebrow, value, description, and optional URL.
Public page showing a grid of cards above a feature grid.

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.
Sıradaki: Sayfa layout'u seçin ve değiştirin

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>