Skip to main content

Utility Classes

Utility Classes​

Size Classes​

Size Utilities
<div class="nvs-w-full">Full width (100%)</div>
<div class="nvs-h-full">Full height (100%)</div>

Usage Examples​

Basic Grid Layout​

Basic Layout
<div class="nvs-container">
  <div class="nvs-row">
    <div class="nvs-col-4">
      <h3>Left Sidebar</h3>
      <p>Navigation menu</p>
    </div>
    <div class="nvs-col-8">
      <h1>Main Content</h1>
      <p>Page content goes here</p>
    </div>
  </div>
</div>

Responsive Card Grid​

Responsive Card System
<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​

Central 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>Welcome</h1>
        <p>This content is centered both horizontally and vertically.</p>
        <button>Get Started</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">First Name</label>
        <input type="text" id="firstname" class="nvs-w-full" />
      </div>
      <div class="nvs-col-12 nvs-col-md-6">
        <label for="lastname">Last Name</label>
        <input type="text" id="lastname" class="nvs-w-full" />
      </div>
    </div>
    <div class="nvs-row">
      <div class="nvs-col-12">
        <label for="email">Email</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">Submit</button>
      </div>
    </div>
  </form>
</div>