UI KIT · MARKETING · HERO

Sayfanızın ilk izlenimi.

İki hero varyantı: ortalanmış, tek sütun bir giriş ve görsel alanı olan bölünmüş bir düzen. İkisi de aynı token'ları ve ck-container/ck-cluster primitive'lerini kullanır.

Varyant 1 · Ortalanmış

Ürününüzü tek cümlede anlatın.

Kısa, net bir alt başlık okuyucuya ne yapacağını ilk saniyede söyler. Buton grubu birincil ve ikincil eylemi ayırır.

Hemen başlayın Dokümanlara bakın

Varyant 2 · Bölünmüş (görselli)

Metin solda, görsel sağda.

İçerik ağırlıklı sayfalarda metnin okunabilirliğini korurken bir ürün görseli veya ekran görüntüsüne yer açar.

Demo isteyin Fiyatlandırmayı görün

Görsel alanı

Tokenlar: --ck-font-size-display, --ck-line-display, --ck-space-6. Duyarlı davranış: ck-grid--2 <40rem altında tek sütuna düşer. Odak: her buton global :focus-visible halkasını kullanır.