AK Design System
Hızlı prototipleme ve üretime hazır uygulamalar için hafif, modern bir CSS çatısı.
Hafif
Maksimum etki ile minimum boyut. Sadece 14KB (minified ve gzipped).
Temalanabilir
Kolay özelleştirme için CSS değişkenleri ile oluşturuldu. Aydınlık ve karanlık modlar dahil.
Duyarlı
Mobil öncelikli yaklaşım, arayüzünüzün tüm cihazlarda harika görünmesini sağlar.
Başlarken
Çeşitli Bileşenler
Rozetler
İlerleme
Anahtar
Açılır Menü
Tipografi
Tüm VaryantlarBaşlık 1
Başlık 2
Başlık 3
Başlık 4
Başlık 5
Başlık 6
Bu, bir bağlantı ve biraz metin içeren standart bir paragraftır.
Bu, daha fazla dikkat çeken daha büyük bir paragraftır.
Bu, daha az önemli bilgiler için daha küçük bir paragraftır.
Tasarım sadece nasıl göründüğü ve hissettirdiği değildir. Tasarım nasıl çalıştığıdır.
Bu satır içi kod örneğidir
Renkler
Ana Renkler
--ak-primary
--ak-accent
--ak-secondary
Durum Renkleri
--ak-success
--ak-warning
--ak-danger
--ak-info
Arka Planlar
Tüm VaryantlarDesenler (dots, grid, stripes, waves) ve dekoratif arka planlar. Sistem renklerini CSS değişkenleri üzerinden kullanır.
Yükleyiciler
Tüm Varyantlarİşaretçiler, noktalar, ilerleme çubukları ve gelişmiş animasyonlar dahil olmak üzere kapsamlı bir yükleme göstergeleri çerçevesi.
İşaretçi
Noktalar
Dalga
Formlar
Tüm VaryantlarSeçim Kontrolleri
Tüm VaryantlarKartlar, bölümlendirilmiş kontroller ve gelişmiş anahtarlar içeren modern seçim kontrolleri.
Seçim Kartları
Bölümlendirilmiş Kontroller
Anahtarlar
Yükleme
Tüm VaryantlarÇeşitli stil ve durumlara sahip sürükle ve bırak dosya yükleme alanları.
Dosyaları buraya bırakın veya tıklayın
SVG, PNG, JPG veya GIF (maks. 800x400px)
Kartlar
Tüm VaryantlarTemel Kart
Bu, başlık ve içeriğe sahip temel bir karttır.
Resimli Kart
Bu kart üst kısımda bir resim içerir.
Alt Bilgili Kart
Bu kart, eylemler içeren bir alt bilgiye sahiptir.
Uyarılar
Tüm VaryantlarBilgi
Bu bir bilgilendirme mesajıdır.
Başarılı
İşleminiz başarıyla tamamlandı.
Uyarı
Lütfen bu işlemde dikkatli olun.
Hata
Bir şeyler ters gitti. Lütfen tekrar deneyin.
Modallar
Tüm VaryantlarBaşarılı
İşleminiz başarıyla tamamlandı.
Düzen Bileşenleri
Tüm VaryantlarHero Bölümü
Landing sayfaları ve öne çıkan çağrı-aksiyon bölümleri için mükemmel.
AK Systems'e Hoş Geldiniz
Modern tasarım ilkeleriyle dijital altyapının geleceğini inşa ediyoruz.
Görüntü Yardımcıları
Esnek görüntü işleme için duyarlı görüntüler ve object-fit yardımcıları.
Duyarlı Görüntü (ak-img-fluid)
Otomatik olarak konteyner genişliğine ölçeklenir
Küçük Resim (ak-img-thumbnail)
Çerçeve ve dolgu ile galeri stili
Object Cover (ak-object-cover)
Konteyneri doldurur, en-boy oranını korur
Object Contain (ak-object-contain)
Konteyner içine sığar, tam görüntüyü gösterir
Tablolar
Tüm Varyantlar| İsim | E-posta | Rol | Durum | İşlemler |
|---|---|---|---|---|
| Ahmet Yılmaz | ahmet@ornek.com | Yönetici | Aktif |
|
| Ayşe Demir | ayse@ornek.com | Kullanıcı | Beklemede |
|
| Mehmet Kaya | mehmet@ornek.com | Kullanıcı | Pasif |
|
Gelişmiş Bileşenler
Tüm VaryantlarAvatarlar
Chatbot UI
Demoyu acDestek, satis widget'i ve urun copilot senaryolari icin yeni yerlesimler.
Ipuclari & Akordeon
Tooltip SayfasiTooltip ve popover icin konumlar, boyutlar ve daha zengin ornekler artik ayri bir demo sayfasinda.
Akordeon Öğesi 1
Akordeon Öğesi 2
Yardımcı Sınıflar
Boşluklar
Flex
Grid
Metin Hizalama
Sola hizalı metin
Ortalanmış metin
Sağa hizalı metin
Yeni Utility Yardimcilari
musteri-destek-icin-cok-uzun-bir-adres@ornek-uygulama.test