UI KIT PATTERN · 01

Bir proje paneli için sade başlangıç.

Bu pattern yalnızca CKCSS core sınıflarını ve semantic HTML’i kullanır. JavaScript, build adımı veya sayfaya özel component CSS’i gerekmez.

Pattern’i incele Component’lere dön

DASHBOARD / OVERVIEW

İyi iş, Ada.

Projelerinizin güncel durumu.

Pricing pattern Yeni proje

Aktif projeler12%18 artış

Bekleyen işler285 bugün

Tamamlanma84%Hedefte

PATTERN CATALOG

Bir sonraki sayfanız için başlangıçlar.

02 · Pricing

Planları sadeleştirin.

Üç seçenekli, responsive pricing sayfası.

03 · Contact

İyi bir konuşma başlatın.

Accessible field ve form düzeni.

04 · App Shell

Uygulamanızı çerçeveleyin.

Sidebar, toolbar ve dashboard içeriği.

05 · Data

Veriyi yönetin.

Arama, filtre, tablo ve durumlar.

06 · Auth

Güvenli başlangıç.

Giriş formu ve erişilebilir yardım akışı.

SOURCE

Copy, customize, ship.

Pattern’in HTML’i semantic component’lere ayrılır; kendi projenize alıp token’larla özelleştirebilirsiniz.

<main class="ck-container ck-stack ck-stack--relaxed">
  <header class="ck-cluster ck-cluster--spread">
    ...
  </header>
  <div class="ck-grid ck-grid--3">
    ...
  </div>
</main>