Skip to content

Nimbus Framework

A custom CSS framework for modern web apps, dashboards, and SaaS. Clean, minimal, and fully customizable.

Get Started Components

Quick Start

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Hosting Site</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

    <a href="#" class="hu-btn hu-btn-primary">Get Started</a>

    <script src="js/main.js"></script>
</body>
</html>

Buttons

Versatile button components for every action.

Solid Buttons
HTML 
<button class="hu-btn hu-btn-primary">Primary</button>
<button class="hu-btn hu-btn-secondary">Secondary</button>
<button class="hu-btn hu-btn-success">Success</button>
<button class="hu-btn hu-btn-danger">Danger</button>
<button class="hu-btn hu-btn-warning">Warning</button>
<button class="hu-btn hu-btn-info">Info</button>
Outline Buttons
HTML 
<button class="hu-btn hu-btn-outline-primary">Primary</button>
<button class="hu-btn hu-btn-outline hu-btn-secondary">Secondary</button>
<button class="hu-btn hu-btn-outline-success">Success</button>
<button class="hu-btn hu-btn-outline-danger">Danger</button>
Ghost & Link Buttons
HTML 
<button class="hu-btn hu-btn-ghost">Ghost</button>
<button class="hu-btn hu-btn-link">Link Button</button>
Button Sizes
HTML 
<button class="hu-btn hu-btn-primary hu-btn-xs">Extra Small</button>
<button class="hu-btn hu-btn-primary hu-btn-sm">Small</button>
<button class="hu-btn hu-btn-primary hu-btn-md">Medium</button>
<button class="hu-btn hu-btn-primary hu-btn-lg">Large</button>
<button class="hu-btn hu-btn-primary hu-btn-xl">Extra Large</button>
Disabled & Loading
HTML 
<button class="hu-btn hu-btn-primary hu-btn-disabled" disabled>Disabled</button>
<button class="hu-btn hu-btn-primary hu-btn-loading" disabled>Loading...</button>
Block & Icon Buttons
HTML 
<button class="hu-btn hu-btn-primary hu-btn-block">Block Button</button>

<button class="hu-btn hu-btn-primary hu-btn-icon" aria-label="Settings">
    <svg>...</svg>
</button>
Button Group
HTML 
<div class="hu-btn-group" role="group">
    <button class="hu-btn hu-btn-outline-primary">Left</button>
    <button class="hu-btn hu-btn-outline-primary">Center</button>
    <button class="hu-btn hu-btn-outline-primary">Right</button>
</div>

Cards

Flexible content containers for grouping related information.

Basic Card

Card Title

Card subtitle

This is a basic card with some sample content inside it.

HTML 
<div class="hu-card">
    <div class="hu-card-body">
        <h3 class="hu-card-title">Card Title</h3>
        <p class="hu-card-subtitle">Card subtitle</p>
        <p class="hu-card-text">Card text content.</p>
        <button class="hu-btn hu-btn-primary">Action</button>
    </div>
</div>
Card with Header & Footer
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

3 days ago
HTML 
<div class="hu-card">
    <div class="hu-card-header">Featured</div>
    <div class="hu-card-body">
        <h3 class="hu-card-title">Special title treatment</h3>
        <p class="hu-card-text">Supporting text below.</p>
        <button class="hu-btn hu-btn-primary">Go somewhere</button>
    </div>
    <div class="hu-card-footer hu-text-muted">3 days ago</div>
</div>
Horizontal Card

VPS Hosting

High-performance virtual private servers with full root access and dedicated resources.

HTML 
<div class="hu-card hu-card-horizontal">
    <div style="width: 200px;">Image</div>
    <div class="hu-card-body">
        <h3 class="hu-card-title">VPS Hosting</h3>
        <p class="hu-card-text">Description text.</p>
        <button class="hu-btn hu-btn-primary hu-btn-sm">View Plans</button>
    </div>
</div>
Card Grid

Shared Hosting

Affordable hosting for personal websites and blogs.

VPS Hosting

Scalable virtual servers for growing businesses.

Dedicated Server

Full control with dedicated hardware resources.

HTML 
<div class="hu-grid hu-grid-3 hu-gap-6">
    <div class="hu-card hu-card-hover">
        <div class="hu-card-body">
            <h3 class="hu-card-title">Shared Hosting</h3>
            <p class="hu-card-text">Description.</p>
        </div>
    </div>
    <div class="hu-card hu-card-hover">...</div>
    <div class="hu-card hu-card-hover">...</div>
</div>

Alerts

Contextual feedback messages for user actions.

Alert Variants
Info Your server has been successfully provisioned.
Success Your domain has been registered successfully.
Warning Your SSL certificate will expire in 7 days.
Danger Payment failed. Please update your billing information.
HTML 
<div class="hu-alert hu-alert-info">
    <span class="hu-alert-icon">...icon...</span>
    <div class="hu-alert-content">
        <strong class="hu-alert-title">Info</strong>
        <span>Your message here.</span>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss">...</button>
</div>

<!-- Variants: hu-alert-info, hu-alert-success, hu-alert-warning, hu-alert-danger -->

Badges

Small count and labeling components.

Badge Variants
Primary Success Warning Danger Info Neutral
HTML 
<span class="hu-badge hu-badge-primary">Primary</span>
<span class="hu-badge hu-badge-success">Success</span>
<span class="hu-badge hu-badge-warning">Warning</span>
<span class="hu-badge hu-badge-danger">Danger</span>
<span class="hu-badge hu-badge-info">Info</span>
<span class="hu-badge hu-badge-neutral">Neutral</span>
Badge Sizes
Small Default Large
HTML 
<span class="hu-badge hu-badge-primary hu-badge-sm">Small</span>
<span class="hu-badge hu-badge-primary">Default</span>
<span class="hu-badge hu-badge-primary hu-badge-lg">Large</span>
Status Dot Badges
Online Offline Pending Maintenance
HTML 
<span class="hu-badge hu-badge-dot hu-badge-online">Online</span>
<span class="hu-badge hu-badge-dot hu-badge-offline">Offline</span>
<span class="hu-badge hu-badge-dot hu-badge-pending">Pending</span>
<span class="hu-badge hu-badge-dot hu-badge-maintenance">Maintenance</span>

Forms

Form controls, layouts, and validation styles.

Text Inputs
HTML 
<div class="hu-form-group">
    <label class="hu-form-label" for="name">Name</label>
    <input type="text" id="name" class="hu-form-control" placeholder="Enter your name">
</div>
Select & Textarea
HTML 
<div class="hu-form-group">
    <label class="hu-form-label" for="plan">Hosting Plan</label>
    <select id="plan" class="hu-form-select">
        <option value="">Select a plan</option>
        <option>Shared Hosting</option>
    </select>
</div>

<div class="hu-form-group">
    <label class="hu-form-label" for="message">Message</label>
    <textarea id="message" class="hu-form-textarea" rows="3"></textarea>
</div>
Checkboxes, Radios & Switches
HTML 
<div class="hu-form-check">
    <input type="checkbox" id="check1" class="hu-form-check-input" checked>
    <label class="hu-form-check-label" for="check1">SSL Certificate</label>
</div>

<div class="hu-form-check">
    <input type="radio" name="os" id="radio1" class="hu-form-check-input" checked>
    <label class="hu-form-check-label" for="radio1">Linux</label>
</div>

<div class="hu-form-check hu-form-switch">
    <input type="checkbox" id="switch1" class="hu-form-check-input" checked>
    <label class="hu-form-check-label" for="switch1">Enable CDN</label>
</div>
Input Group
https:// .com
Choose a domain name for your website.
HTML 
<div class="hu-input-group">
    <span class="hu-input-group-text">https://</span>
    <input type="text" class="hu-form-control" placeholder="yourdomain.com">
    <span class="hu-input-group-text">.com</span>
</div>
<span class="hu-form-hint">Choose a domain name.</span>
Validation States
Email address is valid.
Please enter a valid email address.
HTML 
<input type="email" class="hu-form-control hu-is-valid" value="admin@example.com">
<span class="hu-valid-feedback">Email is valid.</span>

<input type="email" class="hu-form-control hu-is-invalid" value="bad">
<span class="hu-invalid-feedback">Please enter a valid email.</span>

Pricing Table

Pricing grids for subscription tiers and service plans.

3-Column Pricing Grid
Starter
Perfect for personal websites
$ 4.99 /mo
  • 1 Website
  • 10 GB Storage
  • 100 GB Bandwidth
  • Free SSL
  • Daily Backups
Choose Plan
Most Popular
Professional
Best for small businesses
$ 12.99 /mo
  • 10 Websites
  • 50 GB Storage
  • Unlimited Bandwidth
  • Free SSL
  • Daily Backups
Choose Plan
Enterprise
For large-scale operations
$ 39.99 /mo
  • Unlimited Websites
  • 200 GB Storage
  • Unlimited Bandwidth
  • Free SSL + CDN
  • Priority Support
Choose Plan
HTML 
<div class="hu-pricing-grid">
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Starter</div>
        <div class="hu-pricing-desc">Perfect for personal websites</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">4.99</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
        <ul class="hu-pricing-features">
            <li class="hu-pricing-feature">...</li>
        </ul>
        <a href="#" class="hu-btn hu-btn-outline-primary hu-btn-block">Choose Plan</a>
    </div>

    <div class="hu-pricing-card hu-popular">
        <!-- Featured/Popular card -->
    </div>

    <div class="hu-pricing-card">...</div>
</div>

Feature Grid

Showcase key features with icons and descriptions.

4-Column Feature Grid

Lightning Fast

SSD storage and optimized servers for maximum performance and speed.

Secure

Free SSL certificates and advanced security features to protect your site.

Automatic Backups

Daily automated backups with one-click restore to keep your data safe.

24/7 Support

Expert support team available around the clock to help you succeed.

HTML 
<div class="hu-feature-grid">
    <div class="hu-feature-card">
        <div class="hu-feature-icon">...svg icon...</div>
        <h3 class="hu-feature-title">Lightning Fast</h3>
        <p class="hu-feature-desc">SSD storage and optimized servers.</p>
    </div>
    <div class="hu-feature-card">...</div>
    <div class="hu-feature-card">...</div>
    <div class="hu-feature-card">...</div>
</div>

Hero & Jumbotron

Bold introductory sections for landing pages.

Hero Component

Host Your Website Today

Fast, reliable, and secure hosting solutions for businesses of all sizes.

Get Started View Plans

No credit card required. 30-day money-back guarantee.

HTML 
<div class="hu-hero">
    <h1 class="hu-hero-title">Host Your Website Today</h1>
    <p class="hu-hero-subtitle">Fast, reliable hosting.</p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg">Get Started</a>
        <a href="#" class="hu-btn hu-btn-outline hu-btn-lg">View Plans</a>
    </div>
    <p class="hu-hero-muted">No credit card required.</p>
</div>
Jumbotron Component

Powerful Hosting Infrastructure

Enterprise-grade servers with 99.9% uptime guarantee and global CDN.

Explore Plans Contact Sales
HTML 
<div class="hu-jumbotron">
    <h1 class="hu-jumbotron-title">Powerful Hosting</h1>
    <p class="hu-jumbotron-subtitle">Enterprise-grade servers.</p>
    <div class="hu-jumbotron-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg">Explore Plans</a>
        <a href="#" class="hu-btn hu-btn-ghost hu-btn-lg">Contact Sales</a>
    </div>
</div>

Tables

Data tables for displaying structured information.

Basic Table
Server IP Address Status CPU RAM
web-server-01 192.168.1.100 Online 4 vCPU 8 GB
web-server-02 192.168.1.101 Online 8 vCPU 16 GB
db-server-01 192.168.1.200 Offline 4 vCPU 32 GB
HTML 
<div class="hu-table-responsive">
    <table class="hu-table">
        <thead>
            <tr>
                <th>Server</th>
                <th>IP Address</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>web-server-01</td>
                <td>192.168.1.100</td>
                <td><span class="hu-badge hu-badge-dot hu-badge-online">Online</span></td>
            </tr>
        </tbody>
    </table>
</div>
Striped Table
Plan Price Websites Storage
Starter $4.99/mo 1 10 GB
Professional $12.99/mo 10 50 GB
Enterprise $39.99/mo Unlimited 200 GB
HTML 
<table class="hu-table hu-table-striped">
    ...
</table>

<!-- Additional variants: hu-table-compact, hu-table-border -->

Accordion

Collapsible content panels for FAQs and expandable sections.

FAQ Accordion
Web hosting is a service that allows individuals and organizations to make their website accessible on the internet. A web host provides the technology and services needed for a website to be viewed online.
HTML 
<div class="hu-accordion">
    <div class="hu-accordion-item hu-active">
        <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="true">
                Question text
                <span class="hu-accordion-icon">...chevron...</span>
            </button>
        </div>
        <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
                Answer content here.
            </div>
        </div>
    </div>
</div>

Lists

Styled list components for various content types.

Bulleted List
  • Free domain name registration
  • Unlimited email accounts
  • One-click app installer
  • 24/7 network monitoring
HTML 
<ul class="hu-list hu-list-bulleted">
    <li class="hu-list-item">Free domain name</li>
    <li class="hu-list-item">Unlimited email accounts</li>
</ul>
Numbered List
  1. Choose your hosting plan
  2. Register or transfer your domain
  3. Set up your website
  4. Go live!
HTML 
<ol class="hu-list hu-list-numbered">
    <li class="hu-list-item">Choose your plan</li>
    <li class="hu-list-item">Register domain</li>
</ol>
Feature List
  • 99.9% Uptime Guarantee
  • Free SSL Certificate
  • Daily Backups
  • One-Click Installer
  • 24/7 Expert Support
HTML 
<ul class="hu-feature-list">
    <li class="hu-list-item">
        <span class="hu-list-item-icon">...checkmark...</span>
        99.9% Uptime Guarantee
    </li>
</ul>

Server Status

Status indicators for servers and services.

Status Badges
Online Offline Pending Maintenance
HTML 
<span class="hu-status hu-status-online">
    <span class="hu-status-dot"></span>
    Online
</span>

<span class="hu-status hu-status-offline">
    <span class="hu-status-dot"></span>
    Offline
</span>

<span class="hu-status hu-status-pending">
    <span class="hu-status-dot"></span>
    Pending
</span>

<span class="hu-status hu-status-maintenance">
    <span class="hu-status-dot"></span>
    Maintenance
</span>

Layout Utilities

Container, grid, and flexbox utilities for page layout.

Grid System
Column 1
Column 2
Column 3
Column 4
3-Column
3-Column
3-Column
2-Column
2-Column
HTML 
<div class="hu-grid hu-grid-4 hu-gap-4">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
</div>

<!-- Available: hu-grid-2, hu-grid-3, hu-grid-4 -->
<!-- Spacing: hu-gap-4, hu-gap-6, hu-gap-8 -->
Spacing & Text Utilities

hu-text-xs - Extra small text

hu-text-sm - Small text

hu-text-base - Base text size

hu-text-lg - Large text

hu-text-xl hu-font-semibold

hu-text-2xl hu-font-bold hu-text-primary

HTML 
<p class="hu-text-xs hu-text-muted">Extra small text</p>
<p class="hu-text-sm hu-text-secondary">Small text</p>
<p class="hu-text-base">Base text</p>
<p class="hu-text-lg">Large text</p>
<p class="hu-text-xl hu-font-semibold">XL Semibold</p>
<p class="hu-text-2xl hu-font-bold hu-text-primary">2XL Bold Primary</p>

<!-- Text sizes: hu-text-xs, hu-text-sm, hu-text-base, hu-text-lg, hu-text-xl, hu-text-2xl, hu-text-3xl, hu-text-4xl, hu-text-5xl -->
<!-- Font weights: hu-font-medium, hu-font-semibold, hu-font-bold -->
<!-- Colors: hu-text-primary, hu-text-secondary, hu-text-muted -->