Getting Started

Add Pixel Lab® Nova to your project via CDN — no build tools required.

CDN Links

Place the following tags in your HTML <head> and before </body>:

CSS

<link rel="stylesheet" href="https://nova.pixellab.com.tr/dist/pixel-lab-nova.css">

JavaScript

<script src="https://nova.pixellab.com.tr/dist/pixel-lab-nova.js"></script>

Starter Template

<!DOCTYPE html>
<html lang="tr" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="https://nova.pixellab.com.tr/dist/pixel-lab-nova.css">
</head>
<body>
  <h1>Hello Nova!</h1>
  <button class="pl-btn pl-btn-primary">Get Started</button>

  <script src="https://nova.pixellab.com.tr/dist/pixel-lab-nova.js"></script>
</body>
</html>

Dependencies

Font & Icons

Nova uses Plus Jakarta Sans (Google Fonts) and Font Awesome 6 for icons. Include them in your project for the best experience. Nova works without them, but the design will use fallback fonts.

Typography

Display headings, body text, and text utilities.

Display Headings

Display 1

Display 2

Display 3

Display 4

Headings

h1 | Pixel Lab® Nova

h2 | Design System

h3 | Components

h4 | Utilities

h5 | Layout

h6 | Tokens

Body & Inline

Lead paragraph | A modern, production-ready CSS+JS framework.

Body text | The quick brown fox jumps over the lazy dog.

Small text | Supporting detail in a smaller size.

Muted · Secondary · Bold · Italic

Inline code and Kbd

Grid System

12-column responsive grid with gutter control.

Equal Columns

col

Sized Columns

col-4

col-3

col-6

col-3

Tables

Responsive, striped, hover tables.

Name	Status	Role	Action
Buğrahan K.	Active	Admin	Edit
Pixel Lab	Pending	Editor	Edit
Nova UI	Inactive	Viewer	Edit

Form Controls

Text inputs, textareas, selects, and sizes.

Email address We'll never share your email.

Select option

Message

Disabled

Sizes

Checks & Radios

Checkboxes, radio buttons, and toggle switches.

Checkboxes

Checked

Unchecked

Disabled

Radios

Selected

Unselected

Switches

On

Off

Input Groups

Prepend and append elements to inputs.

USD

Floating Labels

Animated labels that float above the input.

Email address

Password

Validation

Valid and invalid states with feedback messages.

Valid field

Looks good!

Invalid field

Please enter a valid value.

Navbar

Responsive navigation bar with brand, links, actions, and mobile collapse.

Default Navbar

Dark / Inverted

Variants & Mobile

Available modifiers:

.pl-navbar-fixed .pl-navbar-sticky .pl-navbar-toggler .pl-navbar-collapse

Mobile collapse is activated automatically under 992px. Add .pl-navbar-toggler for the hamburger menu.

Buttons

Button variants, sizes, groups, and states.

Variants

Sizes

Button Group

Disabled & Block

Badges

Inline status indicators and labels.

Default Success Danger Warning Info Filled

Alerts

Contextual feedback alerts with icons.

Info

This is an informational alert message.

Success

Operation completed successfully.

Warning

Please review your changes before saving.

Error

Something went wrong. Try again.

Cards

Flexible content containers with header, body, and footer.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn more

Featured

Card with Header

With supporting text below as a natural lead-in.

Last updated 3 mins ago

Breadcrumb

Navigation hierarchy indicator.

Pagination

Page navigation controls with sizes.

List Group

Flexible bordered list items.

Active item
Regular item
Another item
Disabled item

Progress

Progress bars with semantic variants and animations.

Default (65%)

Success (80%)

Striped Animated (45%)

Spinners

Loading indicators in border and grow styles.

Accordion

Collapsible content sections with exclusive toggling.

Nova is a production-ready CSS+JS framework built with the Zinc monochrome design system. It provides Bootstrap-level components with a modern, minimal aesthetic.

Check the license terms for details on usage and distribution.

CSS-only components work without JS. Interactive components (modal, dropdown, tabs, etc.) require the Nova JS bundle.