How can we help?

Custom CSS Guide

Learn how to use custom CSS for your Help center

Layout Component Classes

  • .hc-layout - Main wrapper for the entire help center layout
  • .hc-background - Controls the background styling of the help center
  • .hc-main-content - Container for the main content area
  • .hc-navbar - Container for the navigation bar
  • .hc-mobile-menu - Container for the mobile menu
  • .hc-footer - Container for the footer section

Navbar Component Classes

  • .hc-navbar-container - Outer container for the navbar
  • .hc-navbar-inner - Inner container for navbar content
  • .hc-navbar-content - Wrapper for navbar content elements
  • .hc-navbar-main - Main section of the navbar
  • .hc-navbar-brand - Container for logo and brand elements
  • .hc-navbar-links - Container for navigation links
  • .hc-navbar-menu - Mobile menu trigger button

Mobile Menu Classes

  • .hc-mobile-menu-container - Outer container for mobile menu
  • .hc-mobile-menu-backdrop - Backdrop overlay for mobile menu
  • .hc-mobile-menu-nav - Navigation container in mobile menu
  • .hc-mobile-menu-header - Header section of mobile menu
  • .hc-mobile-menu-content - Content area of mobile menu
  • .hc-mobile-menu-links - Container for mobile menu links

Footer Classes

  • .hc-footer-container - Main container for footer
  • .hc-footer-content - Content wrapper for footer
  • .hc-footer-brand - Brand section in footer
  • .hc-footer-links-container - Container for footer links
  • .hc-footer-links - Footer links wrapper
  • .hc-footer-bottom - Bottom section of footer

Search Component Classes

  • .search-wrapper - Main container for search functionality
  • .search-input-container - Container for search input
  • .search-input - Search input field
  • .search-icon - Search icon
  • .search-clear-button - Clear search button
  • .search-clear-icon - Clear search icon
  • .search-results-container - Container for search results
  • .search-results-scroll - Scrollable area for search results
  • .search-no-results - No results message
  • .search-footer - Footer of search results
  • .search-support-button - Support request button
  • .search-support-icon - Support icon

Category Card Classes

  • .hc-category-card - Main container for the category card; use to style the card's overall appearance
  • .hc-category-link - Wrapper for the clickable area; use to customize link behavior and hover states
  • .hc-category-icon - Category icon image; use to customize the icon size and appearance
  • .hc-category-title - Title container; use to style the title wrapper
  • .hc-category-name - Category name text; use to style the category name specifically
  • .hc-category-description - Category description text; use to customize description appearance
  • .hc-category-count - Article count text; use to style the count display

Featured Articles List Classes

  • .hc-featured - Main container for featured articles section; use to style the overall container
  • .hc-featured-title - Title of the featured articles section; use to customize the heading
  • .hc-featured-grid - Grid container for featured articles; use to modify the layout of articles
  • .hc-featured-item - Individual featured article container; use to style each article item
  • .hc-featured-content - Content wrapper for article text; use to style the content area
  • .hc-featured-name - Article name text; use to style the article title
  • .hc-featured-arrow - Arrow icon container; use to customize the arrow appearance

Main Layout

  • .hc-container - Main container for the entire category page layout
  • .hc-category-wrapper - Wrapper for all category-related content
  • .hc-category-content - Container for category sections and blog lists

Current Category Section

  • .hc-current-category - Container for the current category's articles
  • .hc-current-category-content - Content wrapper for current category articles

Category Section

  • .hc-category-section - Individual category section container
  • .hc-category-header - Header area of each category section
  • .hc-category-title - Category name/title styling
  • .hc-category-divider - Horizontal line separator between category header and articles
  • .hc-category-content - Content area for category articles

Article Elements

  • .hc-article-link - Individual article link container
  • .hc-article-content - Article content wrapper
  • .hc-article-title - Article title text
  • .hc-article-arrow - Arrow icon container for article links

Empty States

  • .hc-empty-state - Container for empty state messaging
  • .hc-empty-category - Empty category message container
  • .hc-empty-title - Empty state heading text

404 Page Elements

  • .hc-404 - Main container for 404 error page
  • .hc-404-content - Content wrapper for 404 page
  • .hc-404-code - 404 error code styling
  • .hc-404-title - 404 page title
  • .hc-404-description - 404 error description text
  • .hc-404-link - Home link on 404 page

Main Article Structure

  • .hc-article - Main article container
  • .hc-article-wrapper - Inner wrapper for article content
  • .hc-article-header - Header section of the article
  • .hc-article-title - Article title
  • .hc-article-description - Article description
  • .hc-article-meta - Container for metadata (publish date, etc.)
  • .hc-article-content - Main content container

Breadcrumb Navigation

  • .hc-breadcrumb - Breadcrumb navigation container
  • .hc-breadcrumb-home - Home link in breadcrumb
  • .hc-breadcrumb-category - Category link in breadcrumb
  • .hc-breadcrumb-separator - Separator between breadcrumb items

Table of Contents

  • .hc-toc - Table of contents container
  • .hc-toc-title - TOC heading
  • .hc-toc-list - TOC list container
  • .hc-toc-item - Individual TOC item

Feedback Section

  • .hc-feedback - Feedback section container
  • .hc-feedback-title - Feedback section title
  • .hc-feedback-emoji - Emoji reaction container
  • .hc-feedback-form - Feedback form container
  • .hc-feedback-input - Feedback text input
  • .hc-feedback-submit - Submit button for feedback