Typography

Text styling utilities and semantic HTML elements for clear, readable content across your application.

Headings

All HTML heading elements are styled with consistent typography. Use headings to create a clear content hierarchy.

Heading Sizes

h1. Hosting Framework

font-size: 2.5rem / font-weight: 800

h2. Virtual Private Servers

font-size: 2rem / font-weight: 700

h3. Domain Registration

font-size: 1.5rem / font-weight: 600

h4. SSL Certificates

font-size: 1.25rem / font-weight: 600

h5. Email Hosting

font-size: 1rem / font-weight: 600

h6. Backup Plans

font-size: 0.875rem / font-weight: 600

h1. Hosting Framework
h2. Virtual Private Servers
h3. Domain Registration
h4. SSL Certificates
h5. Email Hosting
h6. Backup Plans

Body Text

Standard paragraph styles, lead text for introductions, and muted text for secondary content.

Paragraph Styles

This is lead text. It's slightly larger and used for introductory paragraphs or hero sections to draw attention.

This is a standard paragraph. Nimbus provides clean, readable typography with the Inter font family. Body text uses a comfortable line height for extended reading, making documentation and hosting dashboards easy to scan.

This is muted text. Use it for captions, timestamps, secondary labels, and any content that should de-emphasized relative to the main text.

This is small text. Useful for footnotes, legal disclaimers, and compact UI elements where space is limited.

Lead text for introductions.
Standard paragraph text.
Muted text for secondary content.
Small text for footnotes.

Inline Elements

Styled inline elements for formatting text within paragraphs and content blocks.

Inline Formatting

You can use bold text for emphasis, italic text for subtle emphasis, and link text for navigation.

Inline code looks like npm install Nimbus and is styled with JetBrains Mono.

Use Ctrl + C to copy selected text, or Cmd + V to paste.

Highlight important terms with mark text to draw attention.

Use small text for fine print and footnotes.

Chemical formulas like H₂O and mathematical expressions like E=mc² use subscript and superscript.

Bold text
Italic text
Link text
Inline code
Ctrl + C
Highlighted text
Fine print
H₂O
E=mc²

Blockquotes

Styled blockquotes for testimonials, callouts, and quoted content.

Blockquote Styles

"Switching to Nimbus reduced our infrastructure setup time from days to minutes. The documentation is exceptional."

— Sarah Chen, DevOps Lead at CloudScale

99.99% uptime across all regions. That's the kind of reliability our clients demand.

— Infrastructure Team


    "Your testimonial quote here."
    — Author Name

Code

Inline code and code blocks for displaying code snippets and configuration examples.

Inline Code

Install Nimbus via npm with npm install Nimbus or via yarn with yarn add Nimbus. Then import it in your entry file.

Install with npm install Nimbus or yarn add Nimbus.

Code Block

# nginx.conf - Server Block
server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(css|js|png|jpg|gif|ico)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

# nginx.conf - Server Block
server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Lists

Basic HTML list styles. For advanced list components, see the Lists component page.

Basic Lists

Unordered

Shared Hosting
VPS Hosting
Dedicated Servers

Ordered

Choose a plan
Register domain
Launch website

Description

CPU: 4 vCPU cores
RAM: 8 GB DDR4
Storage: 100 GB NVMe SSD


    Shared Hosting
    VPS Hosting
    Dedicated Servers



    Choose a plan
    Register domain
    Launch website



    CPU
    4 vCPU cores
    RAM
    8 GB DDR4

Text Utilities

Utility classes for controlling text alignment, colors, font weight, size, spacing, and overflow.

Text Sizes

Control font size with the hu-text-* utility classes.

Size Scale

hu-text-6xl — 3.75rem

hu-text-5xl — 3rem

hu-text-4xl — 2.25rem

hu-text-3xl — 1.875rem

hu-text-2xl — 1.5rem

hu-text-xl — 1.25rem

hu-text-lg — 1.125rem

hu-text-base — 1rem (default)

hu-text-sm — 0.875rem

hu-text-xs — 0.75rem

hu-text-6xl
hu-text-5xl
hu-text-4xl
hu-text-3xl
hu-text-2xl
hu-text-xl
hu-text-lg
hu-text-base
hu-text-sm
hu-text-xs

Font Weights

Control font weight with the hu-font-* utility classes.

Weight Scale

hu-font-light — weight: 300

hu-font-normal — weight: 400

hu-font-medium — weight: 500

hu-font-semibold — weight: 600

hu-font-bold — weight: 700

hu-font-extrabold — weight: 800

hu-font-light — weight: 300
hu-font-normal — weight: 400
hu-font-medium — weight: 500
hu-font-semibold — weight: 600
hu-font-bold — weight: 700
hu-font-extrabold — weight: 800

Text Alignment

Control horizontal text alignment with hu-text-left, hu-text-center, and hu-text-right.

Alignment

hu-text-left — Aligned left

hu-text-center — Centered text

hu-text-right — Aligned right

Left aligned
Centered text
Right aligned

Text Colors

Apply semantic text colors with the hu-text-* color utilities.

Semantic Colors

hu-text-primary — Primary brand color

hu-text-secondary — Secondary text color

hu-text-muted — Muted / subdued text

hu-text-success — Success / online status

hu-text-warning — Warning / pending status

hu-text-danger — Danger / error status

Primary brand color
Secondary text color
Muted / subdued text
Success / online status
Warning / pending status
Danger / error status

Line Height & Letter Spacing

Control vertical rhythm and character spacing for different content contexts.

Spacing Utilities

hu-leading-tight — Tight line height for headings. Each line sits closer together for compact, impactful display text.

hu-leading-normal — Normal line height for body text. The default setting that provides comfortable reading for paragraphs and general content.

hu-leading-relaxed — Relaxed line height for extended reading. Extra breathing room between lines makes long-form content easier to read.

hu-tracking-tight — Tight letter spacing. Characters sit closer together for large display headings.

hu-tracking-wide — Wide letter spacing. Characters spread apart for labels and small caps.

Tight line height for headings.
Normal line height for body text.
Relaxed line height for reading.
Tight letter spacing.
Wide letter spacing.

Text Transform & Overflow

Control text case transformation and text overflow behavior.

Transforms

hu-uppercase — shared hosting plan

HU-LOWERCASE — VPS HOSTING PLAN

hu-capitalize — dedicated server plan

hu-normal-case — MixedCase Text

hu-truncate — This is a very long text that will be truncated with an ellipsis when it exceeds the container width.

hu-line-clamp-2 — This is a long text that will clamp to two lines maximum. Any content beyond the second line will be hidden with an ellipsis indicator.

hu-line-clamp-3 — This is a long text that will clamp to three lines maximum. It allows slightly more content before clamping, which is useful for card descriptions or article excerpts in the hosting dashboard.

shared hosting plan
VPS HOSTING PLAN
dedicated server plan
MixedCase Text
Long text truncated with ellipsis...
Text clamped to two lines...
Text clamped to three lines...

Real-World Examples

Common typography patterns used across your application for plans, server details, and documentation.

Plan Pricing Typography

Professional

$ 12 .99/mo

10 Websites
50 GB NVMe Storage
Unlimited Bandwidth
Free SSL Certificate

Choose Plan


    
        
            Most Popular
        
        Professional
        
            $
            12
            .99/mo
        
        
            10 Websites
            50 GB NVMe Storage
            Unlimited Bandwidth
            Free SSL Certificate
        
        Choose Plan

Server Details Typography

web-server-01 Online

IP Address	`192.168.1.100`
Operating System	Ubuntu 22.04 LTS
CPU	4 vCPU (3.1 GHz)
RAM	8 GB DDR4
Storage	100 GB NVMe SSD
Bandwidth	4 TB / month


    
        web-server-01
        Online
    
    
        
            
                
                    IP Address
                    192.168.1.100
                
                
                    CPU
                    4 vCPU (3.1 GHz)
                
                
                    RAM
                    8 GB DDR4

Documentation Heading Hierarchy

Getting Started with Hosting

Everything you need to deploy your first website in under 5 minutes.

Prerequisites

Before you begin, ensure you have the following ready:

A registered domain name
Access to DNS management
Your hosting account credentials

Step 1: Choose a Hosting Plan

Select the plan that best fits your traffic and storage requirements.

Step 2: Configure DNS

Point your domain's A record to your server's IP address. DNS propagation may take up to 48 hours.

DNS Record Example

Type    Name    Value           TTL
A       @       192.168.1.100   3600
CNAME   www     example.com     3600

Getting Started with Hosting
Everything you need to deploy.

Prerequisites
Before you begin, ensure you have:

    A registered domain name
    Access to DNS management


Step 1: Choose a Hosting Plan
Select the plan that fits your needs.

Step 2: Configure DNS
Point your A record to your server IP.

DNS Record Example
Type    Name    Value           TTL
A       @       192.168.1.100   3600
CNAME   www     example.com     3600

API Reference

Complete list of typography utility classes available in Nimbus.

Text Size Classes

Class	Font Size	Use Case
`.hu-text-xs`	0.75rem (12px)	Captions, fine print
`.hu-text-sm`	0.875rem (14px)	Small labels, metadata
`.hu-text-base`	1rem (16px)	Default body text
`.hu-text-lg`	1.125rem (18px)	Large body text
`.hu-text-xl`	1.25rem (20px)	Subheadings
`.hu-text-2xl`	1.5rem (24px)	Section headings
`.hu-text-3xl`	1.875rem (30px)	Page headings
`.hu-text-4xl`	2.25rem (36px)	Hero headings
`.hu-text-5xl`	3rem (48px)	Display headings
`.hu-text-6xl`	3.75rem (60px)	Large display headings

Font Weight Classes

Class	Weight	Use Case
`.hu-font-light`	300	Light headings, decorative text
`.hu-font-normal`	400	Default body text
`.hu-font-medium`	500	Emphasis, labels
`.hu-font-semibold`	600	Strong emphasis, subheadings
`.hu-font-bold`	700	Headings, bold emphasis
`.hu-font-extrabold`	800	Display headings, hero text

Text Color Classes

Class	Color	Use Case
`.hu-text-primary`	Brand primary	Links, active states, primary actions
`.hu-text-secondary`	Secondary	Body text, descriptions
`.hu-text-muted`	Muted gray	Captions, metadata, hints
`.hu-text-success`	Green	Online status, success messages
`.hu-text-warning`	Amber	Pending status, warnings
`.hu-text-danger`	Red	Error states, critical alerts

Text Alignment Classes

Class	Alignment
`.hu-text-left`	Left aligned
`.hu-text-center`	Center aligned
`.hu-text-right`	Right aligned

Line Height & Spacing Classes

Class	Value	Use Case
`.hu-leading-tight`	1.25	Headings, display text
`.hu-leading-normal`	1.5	Body text, paragraphs
`.hu-leading-relaxed`	1.75	Long-form reading, documentation
`.hu-tracking-tight`	-0.025em	Large headings, display text
`.hu-tracking-wide`	0.05em	Labels, uppercase text

Text Transform & Overflow Classes

Class	Effect
`.hu-uppercase`	Transforms text to uppercase
`.hu-lowercase`	Transforms text to lowercase
`.hu-capitalize`	Capitalizes first letter of each word
`.hu-normal-case`	Removes text transformation
`.hu-truncate`	Truncates text with ellipsis on overflow
`.hu-line-clamp-2`	Clamps text to 2 lines with ellipsis
`.hu-line-clamp-3`	Clamps text to 3 lines with ellipsis

Font Stack: Nimbus uses Inter as the primary font for UI text and JetBrains Mono for code elements. Both are loaded via Google Fonts with preconnect for optimal performance.