HCSS Components - Complete Reference

Buttons

Interactive button component with multiple variants, sizes, and states.

Base Class

.btn

Variants

Solid Variants:

Outline Variants (add .btn-outline):

Usage: .btn .btn-outline .btn-primary

Text Variants (add .btn-text):

Usage: .btn .btn-text .btn-primary

Sizes

div>

Classes: .btn-sm | .btn (default) | .btn-lg | .btn-xl

States

Use disabled attribute or .btn-loading class

Badges

Small label components for categorization and tagging.

Base Class

.badge

Variants

Light Variants (default):

Primary Secondary Success Danger Info Warning

Solid Variants (add .badge-solid):

Primary Success Danger

Usage: .badge .badge-solid .badge-primary

Outline Variants (add .badge-outline):

Primary Success Danger

Sizes:

Small Default (md) Large

Classes: .badge-sm | .badge (default) | .badge-lg

With Dot (.badge-dot):

Primary Success Danger

Cards

Flexible container component for grouping related content.

Base Class

.card

Variants

.card

Default card with border

.card-elevated

Elevated with shadow

.card-filled

Filled background

.card-outline

Transparent with outline

Sizes

.card-sm

.card (default)

.card-lg

Card Sections

Card Title

Optional subtitle

Card content goes here. Use .card-body for main content area.

Classes: .card-header | .card-body | .card-footer

Alerts

Alert notifications for displaying important messages.

Base Class

.alert

Variants

ℹ️

Info Alert

This is an informational alert message. Class: .alert-info

✓

Success Alert

Operation completed successfully. Class: .alert-success

⚠️

Warning Alert

Please pay attention to this warning. Class: .alert-warning

✕

Error Alert

An error has occurred. Class: .alert-danger

Variants: .alert-info | .alert-success | .alert-warning | .alert-danger
Add .alert-solid for solid backgrounds | Add .alert-outline for outline style

Avatars

Avatar component for displaying user images and initials.

Sizes

JD

.avatar-xs

JD

.avatar-sm

JD

.avatar-md

JD

.avatar-lg

JD

.avatar-xl

Color Variants

JD

.avatar-primary

JD

.avatar-success

JD

.avatar-danger

JD

.avatar-info

With Badge

JD

Use .avatar-badge wrapper and .avatar-status div. Add .offline or .busy classes to status

Forms

Form container and grouping components.

Form Container

.form-container | .form-container.form-sm | .form-container.form-lg

Form Groups

.form-group - Vertical layout
.form-group-inline - Horizontal layout
.form-section - Section divider
.form-row - Grid row for inputs
.form-actions - Action buttons group

Labels & Help Text

Required Field

This is helper text

Optional Field

Field with Error

This field has an error

Inputs

Input fields, textareas, selects, and form controls.

Text Input

Default HTML input element styled with HCSS

Input States

Normal:

Success:

Error:

Disabled:

Textarea

Classes: .textarea-sm | .textarea-lg | .textarea-auto

Select

Choose an option:

Input Group (Prefix/Suffix)

$ .00

Use .input-group with .input-group-prefix and .input-group-suffix

Checkboxes & Radios

Checkbox option 1

Checkbox option 2

Radio option 1

Radio option 2

Tables

Responsive table styling with various options.

Basic Table

Name	Email	Status	Date
John Doe	john@example.com	Active	2024-01-15
Jane Smith	jane@example.com	Pending	2024-01-16
Mike Johnson	mike@example.com	Inactive	2024-01-17

Classes: .table-striped | .table-hover | .table-compact | .table-spacious

Modals

Modal dialog component for displaying overlay content.

Modal Structure

<div class="modal-overlay active">
  <div class="modal modal-sm">
    <div class="modal-header">
      <h2 class="modal-title">Modal Title</h2>
      <button class="modal-close">×</button>
    </div>
    <div class="modal-body">
      Modal content goes here
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>

Sizes: .modal-sm | .modal (default) | .modal-lg | .modal-xl

Navbar

Navigation bar component with responsive menu.

Base Classes

.navbar - Main container
.navbar-brand - Brand/logo area
.navbar-menu - Menu items container
.navbar-link - Individual link
.navbar-actions - Right-side actions
.navbar-toggle - Mobile hamburger menu

Example Navbar

Tabs

Tabbed interface component for organizing content.

Tab Structure

<div class="tabs">
  <div class="tabs-header">
    <button class="tab active">Tab 1</button>
    <button class="tab">Tab 2</button>
    <button class="tab">Tab 3</button>
  </div>
  <div class="tabs-content">
    <div class="tab-panel active">Content 1</div>
    <div class="tab-panel">Content 2</div>
    <div class="tab-panel">Content 3</div>
  </div>
</div>

Add .tabs-header-vertical for vertical tabs

Breadcrumbs

Breadcrumb navigation component.

Basic Breadcrumb

Separator Variants

.breadcrumb-separator-arrow

.breadcrumb-separator-dot

Pagination

Pagination controls for navigation.

Basic Pagination

← Previous 1 2 3 4 Next →

Use .active class for current page, .disabled for inactive links

Dropdowns

Dropdown menu component.

Dropdown Structure

<div class="dropdown">
  <button class="btn btn-secondary dropdown-trigger">Menu</button>
  <ul class="dropdown-menu">
    <li><a href="#" class="dropdown-item">Action 1</a></li>
    <li><a href="#" class="dropdown-item">Action 2</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#" class="dropdown-item">Action 3</a></li>
  </ul>
</div>

Use .active class on .dropdown-menu to show. Position variants: .dropdown-menu-right | .dropdown-menu-center

Progress

Progress bar component showing completion status.

Basic Progress Bar

Color Variants

Success (75%)

Danger (30%)

Warning (60%)

Sizes

.progress-sm

.progress-md (default)

.progress-lg

Spinners & Loaders

Loading spinner animations.

Basic Spinner

.spinner

Sizes

.spinner-sm

.spinner-md

.spinner-lg

Color Variants

.spinner-primary

.spinner-success

.spinner-danger

Stats

Stat card component for displaying key metrics.

Stat Cards

📊

$24,500

Total Revenue

+12.5% from last month

👥

3,240

Active Users

-2.1% from last month

Classes: .stat-grid | .stat-grid-2 | .stat-grid-3 | .stat-grid-4

Toasts & Notifications

Toast notification component for transient messages.

Toast Structure

<div class="toast-container toast-container-top-right">
  <div class="toast toast-success">
    <div class="toast-content">
      <div class="toast-title">Success</div>
      <div class="toast-message">Operation completed successfully</div>
    </div>
    <button class="toast-close">×</button>
  </div>
</div>

Tooltips

Tooltip component for showing helpful information.

Tooltip Positions

Hover me (top)

Hover me (bottom)

Hover me (left)

Hover me (right)

Dividers

Divider component for visual separation of content.

Horizontal Dividers

Solid divider (.divider):

Thick divider (.divider-thick):

Dashed divider (.divider-dashed):

Dotted divider (.divider-dotted):

Colored Dividers

Spacing Sizes

.divider-sm - Small margin
.divider-md - Medium margin (default)
.divider-lg - Large margin
.divider-xl - Extra large margin

Vertical Divider

Item 1

Item 2

Class: .divider-vertical