Lists

Structured list components for features, steps, plan details, and content organization across applications.

Basic List

Simple list items with subtle dividers for clean content separation.

Basic List with Dividers

Server uptime monitoring
Automated daily backups
One-click app installer
Free SSL certificate
24/7 customer support

HTML

<ul class="hu-list">
    <li class="hu-list-item">Server uptime monitoring</li>
    <li class="hu-list-item">Automated daily backups</li>
    <li class="hu-list-item">One-click app installer</li>
    <li class="hu-list-item">Free SSL certificate</li>
    <li class="hu-list-item">24/7 customer support</li>
</ul>

List with Icons

Add leading icons to list items for visual context and scannability.

Checkmark Icons

Unlimited bandwidth
Free domain for 1 year
24/7 priority support
Free SSL certificate
Daily backups

HTML

<ul class="hu-list">
    <li class="hu-list-item">
        <span class="hu-list-item-icon">
            <svg ...>...</svg>
        </span>
        Unlimited bandwidth
    </li>
    <li class="hu-list-item">
        <span class="hu-list-item-icon">
            <svg ...>...</svg>
        </span>
        Free domain for 1 year
    </li>
</ul>

Bulleted List

Custom-styled bullet points for unordered content that doesn't require icons.

Custom Bullets

Supports PHP 7.4, 8.0, 8.1, and 8.2
MySQL 8.0 and PostgreSQL 15 databases
Node.js 18 LTS runtime available
SSH access with key-based authentication
Git integration for deployment

HTML

<ul class="hu-list hu-list-bulleted">
    <li class="hu-list-item">Supports PHP 7.4, 8.0, 8.1, and 8.2</li>
    <li class="hu-list-item">MySQL 8.0 and PostgreSQL 15 databases</li>
    <li class="hu-list-item">Node.js 18 LTS runtime available</li>
    <li class="hu-list-item">SSH access with key-based authentication</li>
    <li class="hu-list-item">Git integration for deployment</li>
</ul>

Numbered List

Ordered lists with custom numbering for sequential content and step-by-step instructions.

Auto-numbered Items

Choose your hosting plan
Register or transfer a domain
Configure DNS settings
Upload your website files
Install an SSL certificate

HTML

<ol class="hu-list hu-list-numbered">
    <li class="hu-list-item">Choose your hosting plan</li>
    <li class="hu-list-item">Register or transfer a domain</li>
    <li class="hu-list-item">Configure DNS settings</li>
    <li class="hu-list-item">Upload your website files</li>
    <li class="hu-list-item">Install an SSL certificate</li>
</ol>

Feature List

Prominent checkmark SVGs for showcasing plan features, capabilities, and selling points.

Feature Checklist

99.9% uptime guarantee
Free daily backups with 30-day retention
One-click staging environments
Built-in CDN with 200+ edge locations
Automated security scanning
Free domain name included

HTML

<ul class="hu-feature-list">
    <li class="hu-list-item">
        <svg width="16" height="16" fill="none" stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        99.9% uptime guarantee
    </li>
    <li class="hu-list-item">
        <svg width="16" height="16" fill="none" stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Free daily backups with 30-day retention
    </li>
</ul>

Real-World Examples

Real-world list patterns commonly used in plan pages, control panels, and onboarding flows.

Hosting Plan Features

Business Plan

Unlimited bandwidth
100 GB NVMe SSD storage
Free SSL certificate
24/7 priority support
Free domain for 1 year
Daily automated backups

HTML

<h3>Business Plan</h3>
<ul class="hu-feature-list">
    <li class="hu-list-item">
        <svg ...>...</svg>
        Unlimited bandwidth
    </li>
    <li class="hu-list-item">
        <svg ...>...</svg>
        100 GB NVMe SSD storage
    </li>
    <li class="hu-list-item">
        <svg ...>...</svg>
        Free SSL certificate
    </li>
    <li class="hu-list-item">
        <svg ...>...</svg>
        24/7 priority support
    </li>
</ul>

What's Included

Everything you need to get online

Full cPanel control panel
Unlimited email accounts
MySQL & PostgreSQL databases
One-click WordPress install
Free website migration
Staging environment

HTML

<h3>Everything you need to get online</h3>
<ul class="hu-list">
    <li class="hu-list-item">
        <span class="hu-list-item-icon">
            <svg ...>...</svg>
        </span>
        Full cPanel control panel
    </li>
    <li class="hu-list-item">
        <span class="hu-list-item-icon">
            <svg ...>...</svg>
        </span>
        Unlimited email accounts
    </li>
    <li class="hu-list-item">
        <span class="hu-list-item-icon">
            <svg ...>...</svg>
        </span>
        MySQL & PostgreSQL databases
    </li>
</ul>

Steps to Get Started

Get started in 3 easy steps

Choose a hosting plan that fits your needs
Register your domain name or bring your own
Set up your website with our one-click installer

HTML

<h3>Get started in 3 easy steps</h3>
<ol class="hu-list hu-list-numbered">
    <li class="hu-list-item">Choose a hosting plan that fits your needs</li>
    <li class="hu-list-item">Register your domain name or bring your own</li>
    <li class="hu-list-item">Set up your website with our one-click installer</li>
</ol>

API Reference

Complete list of CSS classes available for lists.

Class	Description
`.hu-list`	Base list container with reset styling, vertical spacing, and dividers between items.
`.hu-list-item`	Individual list item with padding, flex alignment, and bottom border divider.
`.hu-list-item-icon`	Inline icon wrapper for leading icons within list items.
`.hu-list-bulleted`	Bulleted list modifier with custom CSS bullet points replacing default list style.
`.hu-list-numbered`	Numbered list modifier with custom counter styling for ordered sequences.
`.hu-feature-list`	Prominent feature list with checkmark SVGs, accent color, and bold typography.