CSS Classes

The following details all of the CSS classes you can override in a custom stylesheet to further control the look and feel of the help center.


The root element of the Help Center. All the content of the Help Center will be wrapped by this element. By default it has a max width of 80vw.

All elements within gladlyHC have been given box-sizing: border-box

<div class="gladlyHC">

Answer Detail

The Answer Detail section comprises the view of a specific answer in the Help Center. When a user clicks on a search result or an answer in a FAQ section, they navigate to this view.


The wrapper element for the Answer Detail view.

<div class="gladlyHC-answerDetail">


The output of the answer detail.

 <div class="gladlyHC-answerDetail-content">{answer body}</div>


The name of the answer. Rendered as an H2 tag.

 <h2 class="gladlyHC-answerDetail-name">Return Policy</h2>

Answers Index

The Answers Index page comprises of the view of all public answers. When a user clicks on the See more results link, they navigate to this view.


The main wrapper element encompassing all Answers Index components.

<div class="gladlyHC-answersIndex-container">


The individual answer in the list.

<li class="gladlyHC-answersIndex-item">


The full list of answers.

<ul class="gladlyHC-answersIndex-list">


Outermost element surrounding the list of answers on the Answers Index page.

<div class="gladlyHC-answersIndex-section">


The FAQ section contains the categories and answers defined in configuration as sections.


A div that wraps all the content of the FAQ section.

 <div class="gladlyHC-faq">


The heading at the top of the FAQ section. By default the heading is "Frequently Asked Questions". The heading is rendered as an H2 tag.

<h2 class="gladlyHC-faqHeading">Frequently Asked Questions</h2>


Wraps all of the sections of the FAQ. This is where columns are also applied using column modifiers (see the modifiers section below).

<div class="gladlyHC-faqSections gladlyHC-faqSections-col2">
  • .gladlyHC-faqSections-col2
    Applied when 2 column layout is configured
  • .gladlyHC-faqSections-col3
    Applied when 3 column layout is configured


H3 header element that contains the title of the FAQ Section.

<h3 className="gladlyHC-faqSection-header">{header}</h3>


UL containing all answers defined as a part of a specific FAQ section.

<ul className="gladlyHC-faqSection-list">


LI containing the answer title and a link to the answer detail page for that answer. A specific class is also added for the answer Id to allow individual targeting of answers.

<li className="gladlyHC-faqSection-list-item gladlyHC-faqSection-list-item-{answerId}">
<a href="{link_to_answer"}>{Answer title}</a>
  • .gladlyHC-faqSection-list-item-{answerId}
    Added to each answer list item to allow targeting of specific answers.

LI containing the link to the answer section's "See more" page which shows all answers in that section

<li className="gladlyHC-faqSection-list-item gladlyHC-faqSection-list-item-more">
<Link to={`/answers/${sectionId}`}>See more </Link>


Wrapper for each individual section. Each section also gets a specific class that reflects it's specific order.

<div class="gladlyHC-faqSection gladlyHC-faqSection-2">
  • .gladlyHC-faqSection-*
    Class added to each section to represent its order in the sections configuration.


The main wrapper element encompassing all Search components.

<div className="gladlyHC-searchContainer">


Text input where user enters search term. By default only a width of 100% is applied.

<input type="text" className="gladlyHC-searchInput" />


Outermost element surrounding the search results menu. This element is mostly used to make the menu absolute positioned below the search input. In most cases you will not want to modify this, but target .gladlyHC-searchMenu instead. Modify with caution.

<div className="gladlyHC-searchMenuContainer">


Search result item displayed in the menu. Multiple results will be displayed depending on the number of results returned. Search results are rendered as <a> elements and link to an answer detail. When a user mouses over or uses keyboard navigation to select a result, a highlight class (detailed in the modifiers section below) will be applied. A class specific to each results answer will also be applied to each result (see modifiers section).

<a className="gladlyHC-searchResult gladlyHC-searchResult-VsOSB_4wR8u-4ywVVjcFqA">Return Policy</a>
  • .gladlyHC-searchResult-highlighted
    When a search result is selected via keyboard navigation or mouseover, this class will be applied.
  • .gladlyHC-searchResult-{answerId}
    A class that specifies the unique answer id.


note use the selector: .gladlyHC-searchResult .highlightedSearchTerm
When a part of a search result matches the specific search term, the portion that matches is wrapped in a <mark class="highlightedSearchTerm"> element. By default this class makes the matching phrase bold.

<a className="gladlyHC-searchResult"><mark class="highlightedSearchTerm">Retur</mark>n Policy</a>

Search Results

The Search Results section that appears as a separate page. It consists of the search term and search results. Each of these components has specific CSS classes detailed below.


The main wrapper element encompassing all Search components.

<div className="gladlyHC-searchResultsContainer">


The individual search result.

<li className="gladlyHC-searchResultSection-result">


note use the selector: .gladlyHC-searchResultsSection-result .highlightedSearchTerm
When a part of a search result matches the specific search term, the portion that matches is wrapped in a <mark class="highlightedSearchTerm"> element. By default this class makes the matching phrase bold.

<a className="gladlyHC-searchResultsSection-result"><mark class="highlightedSearchTerm">Retur</mark>n Policy</a>


The full list of search results.

<ul className="gladlyHC-searchResultSection-results">


Outermost element surrounding the search term and results.

<div className="gladlyHC-searchResultsSection">