Ana içeriğe geç

Araç Sınıfları

Utility Classes​

Boyut Sınıfları​

Boyut Utility'leri
<div class="nvs-w-full">Tam genişlik (%100)</div>
<div class="nvs-h-full">Tam yükseklik (%100)</div>

Kullanım Örnekleri​

Basit Grid Layout​

Temel Layout
<div class="nvs-container">
  <div class="nvs-row">
    <div class="nvs-col-4">
      <h3>Sol Sidebar</h3>
      <p>Navigasyon menüsü</p>
    </div>
    <div class="nvs-col-8">
      <h1>Ana İçerik</h1>
      <p>Sayfa içeriği buraya gelir</p>
    </div>
  </div>
</div>

Responsive Card Grid​

Responsive Card Sistemi
<div class="nvs-container">
  <div class="nvs-row nvs-jc-center">
    <div class="nvs-col-12 nvs-col-sm-6 nvs-col-md-4 nvs-col-lg-3">
      <div class="card">Card 1</div>
    </div>
    <div class="nvs-col-12 nvs-col-sm-6 nvs-col-md-4 nvs-col-lg-3">
      <div class="card">Card 2</div>
    </div>
    <div class="nvs-col-12 nvs-col-sm-6 nvs-col-md-4 nvs-col-lg-3">
      <div class="card">Card 3</div>
    </div>
    <div class="nvs-col-12 nvs-col-sm-6 nvs-col-md-4 nvs-col-lg-3">
      <div class="card">Card 4</div>
    </div>
  </div>
</div>

Hero Section​

Merkezi Hero Section
<div class="nvs-container">
  <div class="nvs-row nvs-jc-center nvs-ai-center" style="min-height: 70vh;">
    <div class="nvs-col-12 nvs-col-md-8 nvs-col-lg-6">
      <div style="text-align: center;">
        <h1>Hoş Geldiniz</h1>
        <p>Bu içerik hem yatay hem dikey olarak merkezlenmiştir.</p>
        <button>Başlayın</button>
      </div>
    </div>
  </div>
</div>

Form Layout​

Responsive Form
<div class="nvs-container">
  <form>
    <div class="nvs-row">
      <div class="nvs-col-12 nvs-col-md-6">
        <label for="firstname">Ad</label>
        <input type="text" id="firstname" class="nvs-w-full" />
      </div>
      <div class="nvs-col-12 nvs-col-md-6">
        <label for="lastname">Soyad</label>
        <input type="text" id="lastname" class="nvs-w-full" />
      </div>
    </div>
    <div class="nvs-row">
      <div class="nvs-col-12">
        <label for="email">E-posta</label>
        <input type="email" id="email" class="nvs-w-full" />
      </div>
    </div>
    <div class="nvs-row">
      <div class="nvs-col-12 nvs-col-md-6">
        <button type="submit" class="nvs-w-full">Gönder</button>
      </div>
    </div>
  </form>
</div>