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">

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">

A link that appears above the Answer Detail, which allows users to return to the main FAQ area.

 <a class="gladlyHC-answerDetail-backLink">Back</a>

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>

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 link to the Answers Index that appears on the homepage of the help center and contains the full list of answers. If you choose to make this visibility: hidden then your help center won't get the SEO benefit of the index page, which is intended to ensure your Answer pages are indexed by search engines.

<div class="gladlyHC-answersIndex-link"><a>See more results</a></div>

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">

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>
</li>

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>
</li>

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">

The Search section that appears on the FAQ page. It consists of the search input, and upon typing, a menu of search results. Each of these components has specific CSS classes detailed below.

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>

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>

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">