Skip to content
Docs / Components / Cards

Cards

Flexible content containers for displaying grouped information, plans, server status, and more.

Basic Card

A simple card with a body containing text content. The base .hu-card class provides background, border, rounded corners, and a subtle shadow.

Basic Card

This is a basic card with some body text. Cards are used to group related content and actions.

HTML 
<div class="hu-card">
    <div class="hu-card-body">
        <p>This is a basic card with some body text.</p>
    </div>
</div>

Card Title & Subtitle

Use .hu-card-title and .hu-card-subtitle for structured heading content within a card body.

Card with Title & Subtitle

Cloud Hosting Pro

Enterprise-grade performance

High-performance cloud infrastructure with automatic scaling, load balancing, and 99.99% uptime guarantee.

HTML 
<div class="hu-card">
    <div class="hu-card-body">
        <h3 class="hu-card-title">Cloud Hosting Pro</h3>
        <p class="hu-card-subtitle">Enterprise-grade performance</p>
        <p class="hu-card-text">High-performance cloud infrastructure with automatic scaling.</p>
        <button class="hu-btn hu-btn-primary">Get Started</button>
    </div>
</div>

Card with Image

Add an image to the top or bottom of a card using .hu-card-img-top or .hu-card-img-bottom.

Card with Top Image

Dedicated Servers

Enterprise hardware with full root access, NVMe storage, and unmetered bandwidth.

HTML 
<div class="hu-card">
    <img class="hu-card-img-top" src="server.jpg" alt="Dedicated Server">
    <div class="hu-card-body">
        <h3 class="hu-card-title">Dedicated Servers</h3>
        <p class="hu-card-text">Enterprise hardware with full root access.</p>
        <button class="hu-btn hu-btn-primary hu-btn-sm">Configure Server</button>
    </div>
</div>

Horizontal Card

Use .hu-card-horizontal to display a card in a side-by-side layout. The image and body sit next to each other.

Horizontal Card

SSL Certificate

Protect your website with free Let's Encrypt SSL certificates. Auto-renewal enabled by default.

HTML 
<div class="hu-card hu-card-horizontal">
    <img class="hu-card-img" src="ssl.jpg" alt="SSL Certificate">
    <div class="hu-card-body">
        <h3 class="hu-card-title">SSL Certificate</h3>
        <p class="hu-card-text">Protect your website with free SSL certificates.</p>
    </div>
</div>

Card Group

Use .hu-card-group to create a responsive grid of cards. The grid auto-adjusts from 1 to 3 columns based on viewport width.

Feature Cards

99.9% Uptime

Industry-leading uptime guarantee backed by SLA. Your site stays online, always.

24/7 Support

Expert support team available around the clock via live chat, phone, and ticket system.

Free SSL

Free Let's Encrypt SSL certificates on all plans with automatic renewal.

Daily Backups

Automated daily backups with one-click restore. Your data is always safe.

HTML 
<div class="hu-card-group">
    <div class="hu-card">
        <div class="hu-card-body" style="text-align: center;">
            <!-- Icon -->
            <h4 class="hu-card-title">99.9% Uptime</h4>
            <p class="hu-card-text">Industry-leading uptime guarantee.</p>
        </div>
    </div>
    <div class="hu-card">
        <div class="hu-card-body" style="text-align: center;">
            <!-- Icon -->
            <h4 class="hu-card-title">24/7 Support</h4>
            <p class="hu-card-text">Expert support around the clock.</p>
        </div>
    </div>
    <!-- More cards... -->
</div>

Hover Effects

Add .hu-card-hover to enable a lift effect on hover. The card elevates with a stronger shadow and subtle upward translation.

Hover Lift Effect

DDoS Protection

Advanced DDoS mitigation included on all plans at no extra cost.

HTML 
<div class="hu-card hu-card-hover">
    <div class="hu-card-body">
        <h4 class="hu-card-title">DDoS Protection</h4>
        <p class="hu-card-text">Advanced mitigation on all plans.</p>
    </div>
</div>

Interactive Cards

Wrap a card in an <a> tag to make the entire card clickable. The hover effect provides visual feedback.

Clickable Card

Domain Registration

Search and register your perfect domain name. Free WHOIS privacy included.
HTML 
<a href="#" class="hu-card hu-card-hover" style="text-decoration: none; color: inherit;">
    <div class="hu-card-body">
        <h4 class="hu-card-title">Domain Registration</h4>
        <p class="hu-card-text">Search and register your perfect domain name.</p>
    </div>
</a>

Real-World Examples

Real-world card patterns commonly used in dashboards and admin panels and marketing pages.

Hosting Plan Card
Most Popular

VPS Pro

$29 /month
  • 4 vCPU Cores
  • 8 GB RAM
  • 200 GB NVMe Storage
  • Unmetered Bandwidth
HTML 
<div class="hu-card hu-card-hover" style="border: 2px solid var(--hu-primary);">
    <div class="hu-card-header" style="text-align: center;">
        <span class="hu-badge hu-badge-primary">Most Popular</span>
        <h3 class="hu-card-title">VPS Pro</h3>
    </div>
    <div class="hu-card-body" style="text-align: center;">
        <div>
            <span style="font-size: 2.25rem; font-weight: 700;">$29</span>
            <span style="color: var(--hu-text-muted);">/month</span>
        </div>
        <ul style="list-style: none; padding: 0;">
            <li>4 vCPU Cores</li>
            <li>8 GB RAM</li>
            <li>200 GB NVMe Storage</li>
            <li>Unmetered Bandwidth</li>
        </ul>
        <button class="hu-btn hu-btn-primary hu-btn-block">Select Plan</button>
    </div>
</div>
Server Status Card
Web Server #1 Online
CPU Usage
23%
Memory
4.2 / 8 GB
Disk
86 / 200 GB
Uptime
45 days
HTML 
<div class="hu-card">
    <div class="hu-card-header">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <strong>Web Server #1</strong>
            <span class="hu-badge hu-badge-success">Online</span>
        </div>
    </div>
    <div class="hu-card-body">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div>
                <div style="color: var(--hu-text-muted);">CPU Usage</div>
                <div style="font-weight: 600;">23%</div>
            </div>
            <!-- More stats -->
        </div>
    </div>
    <div class="hu-card-footer">
        <button class="hu-btn hu-btn-ghost hu-btn-sm">Restart</button>
        <button class="hu-btn hu-btn-ghost hu-btn-sm">Settings</button>
    </div>
</div>
Domain Card
example.com
Available
$12.99 /year
HTML 
<div class="hu-card">
    <div class="hu-card-body">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <strong>example.com</strong>
            <span class="hu-badge hu-badge-success">Available</span>
        </div>
        <div>
            <span style="font-size: 1.25rem; font-weight: 700;">$12.99</span>
            <span style="color: var(--hu-text-muted);">/year</span>
        </div>
        <div style="display: flex; gap: 0.5rem;">
            <button class="hu-btn hu-btn-primary hu-btn-sm">Register</button>
            <button class="hu-btn hu-btn-outline hu-btn-sm">Transfer</button>
        </div>
    </div>
</div>

API Reference

Complete list of CSS classes available for cards.

Class Description
.hu-card Base card container with background, border, radius, and shadow.
.hu-card-header Top section with background, border-bottom, and padding.
.hu-card-body Main content area with padding.
.hu-card-footer Bottom section with background, border-top, and padding.
.hu-card-title Heading text with size and weight for card context.
.hu-card-subtitle Muted secondary heading text below the title.
.hu-card-text Body text with secondary color and bottom margin.
.hu-card-img-top Full-width image at the top of the card.
.hu-card-img-bottom Full-width image at the bottom of the card.
.hu-card-img Image for horizontal card layout (fixed width).
.hu-card-horizontal Flex row layout for side-by-side card content.
.hu-card-group Responsive grid container for multiple cards.
.hu-card-hover Enables hover lift effect with shadow and translateY.