<link rel="stylesheet" href="https://nova.blacklink.net/nova-main.css" />
<script type="module" src="https://cdn.blacklink.net/nova/nova.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

.my-element {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.my-button {
  background: var(--accent);
  color: #08080f;
}

<h1 class="hero-title">Welcome Back</h1>
<h2 class="section-title">Your Courses</h2>
<h3 class="subsection-title">Active Projects</h3>
<p class="body-secondary">Description text here...</p>
<span class="micro">Label Text</span>

<div class="stack-md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="flex-row gap-sm">
  <span>Inline</span>
  <span>Items</span>
</div>

<!-- Base button class required on all variants -->
<button class="btn" type="button">Default</button>
<button class="btn primary" type="button">Primary</button>
<button class="btn subtle" type="button">Subtle</button>
<button class="btn danger" type="button">Danger</button>
<button class="btn" type="button" disabled>Disabled</button>

<!-- Special actions -->
<button class="btn-launch" type="button">Launch</button>
<button class="btn-passkey" type="button">Passkey</button>
<button class="btn-logout" type="button">Logout</button>
<button class="icon-btn" type="button"><i class="fa-solid fa-gear"></i></button>

<!-- Standard card -->
<div class="card">
  <h3 class="card-title">Title</h3>
  <p class="body-secondary">Content...</p>
</div>

<!-- App card (hoverable product card) -->
<div class="app-card">
  <div class="app-card-top">
    <div class="app-icon"><i class="fa-solid fa-rocket"></i></div>
  </div>
  <div class="app-meta">Category</div>
  <h2>Title</h2>
  <div class="app-description">Description...</div>
</div>

<!-- Badges -->
<span class="badge-pill accent">Accent</span>
<span class="badge-pill default">Default</span>
<span class="badge-pill success">Success</span>
<span class="badge-pill danger">Danger</span>
<span class="badge-pill info">Info</span>

<!-- Chips -->
<span class="chip">Default</span>
<span class="chip success">Verified</span>
<span class="chip danger">Expired</span>

<div class="form-grid">
  <div class="field">
    <label for="name">Full Name</label>
    <input id="name" type="text" placeholder="Enter name" />
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" type="email" placeholder="you@school.edu" />
  </div>
  <div class="field full">
    <label for="bio">Bio</label>
    <textarea id="bio" placeholder="Tell us..."></textarea>
  </div>
</div>

<!-- Tab navigation -->
<div class="tab-nav">
  <button class="tab-nav-item active">Tab 1</button>
  <button class="tab-nav-item">Tab 2</button>
</div>

<!-- Links -->
<a class="sidebar-link" href="#">Sidebar Link</a>
<a class="inline-link" href="#">Inline Link</a>

<!-- Top navigation bar (sticky) -->
<nav class="top-nav" aria-label="Section navigation">
  <a class="top-nav-link" href="#section1">
    <i class="fa-solid fa-star"></i>
    <span class="top-nav-step">01</span>
    <span class="top-nav-label">Section</span>
  </a>
</nav>

<!-- Info box -->
<div class="info-box">
  <div class="info-box-title">
    <i class="fa-solid fa-circle-info"></i> Title
  </div>
  <div class="info-box-content">Content...</div>
</div>

<!-- Info box with success state -->
<div class="info-box success">
  <div class="info-box-title">Success</div>
  <div class="info-box-content">Content...</div>
</div>

<!-- Product alert banner -->
<div class="product-alert">
  <div class="product-alert-copy">
    Announcement text here...
  </div>
</div>