Icon panels styles

If you're using the icon panels subcategory display in your categories, you may want to style those icon panels differently.

We use the same styles for the Icon Panels subcategory display as we do for the homepage category panel icons. The CSS below by default will apply to both places, but if you'd like to only style the Icon Panels subcategory display, you can add the .hg-category-page class in to the start of most styles and target your CSS that way.

Category header/title

By default, the category header (the title that's displayed) will use the default weight for h3s in your knowledge base, which is usually a 700 weight (bold).

We override this in our knowledge base to be a "normal" font weight of 400 using this CSS, added to Settings > Style > Custom CSS:

.cat-icons-wrapper h3 {
  font-weight: 400;
}

Category description

If the option to display category descriptions is enabled, the description will be styled by two CSS elements: some CSS tied to .faq-description and the color comes from the non-button hyperlink colors set across your entire knowledge base. The text color will match other hyperlinks across your knowledge base and the font will be size 18px.

Here's the default CSS for the .faq-description:

.faq-description {
    max-height: 125px; /* sets maximum height for the description */
    overflow: hidden; /* what happens if the descript is taller than that height */
    line-height: 1.2; /* Line height for description */
}

The above CSS will impact category descriptions everywhere they appear. If you want to limit it only to category descriptions within the icon panels, we suggest adjusting the class from .faq-description to .cat-icon-panel .faq-description

If you want to change the color or font size of the category description, we suggest adding custom CSS using that combo of classes, so you're not overriding hyperlink colors across your entire knowledge base. So for example, this code would adjust the font-size and color of the description:

.cat-icon-panel .faq-description {
    color: #808080; /* color of the category description text */
    font-size: 14px; /* font size of the category description text */
}

Overall panel default styles

The default styles we use for the icon panels are listed below.

You can copy this block of CSS and keep just the pieces you need to update.

/* Base style for panels themselves, including border, shadow, curved corners */
.cat-icon-panel {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: none;
    padding: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    backface-visibility: hidden;
}

/* Category icon height and transition on hover */
.category-icon {
    height: 100px;
    transition: all .2s ease-in-out;
}

/* Font size and color for category name */
.hg-minimalist-theme .cat-icon-panel .category-header, 
.cat-icon-panel .category-header {
    font-size: 18px;
    color: #1d284f;
}

/* Alignment of category name */
.cat-icon-panel .category-header {
    text-align: center;
}

/* On hover behavior for the whole panel to make slightly bigger and add shadow */
.cat-icon-panel:hover {
    transform: scale(1.01) translateZ(0);
    box-shadow: 2px 4px 4px #aeaeae;
}

/* On hover behavior to make the icon bigger */
.cat-icon-panel:hover .category-icon {
    transform: scale(1.10);
}