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. If you'd like to change the styles of the Icon Panels subcategory display but keep the homepage styles as-is, refer to Style homepage and category landing page icon panels differently.

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 Customize > Style (HTML & CSS) > Custom CSS:

/* Style homepage and category panels to not have bold titles */
.cat-icons-wrapper h3 {
  font-weight: 400;
}

Category description

If the option to display category descriptions is enabled, the description is styled by two CSS elements:

1. Styling for the .faq-description class
2. Styling for non-button hyperlink colors set across your entire knowledge base.

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 description is taller than that height */
    line-height: 1.2; /* Line height for description */
}

The CSS above impacts category descriptions everywhere they appear, including other Default category subcategory display types. 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, add 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:

/* Adjust category icon panel description text */
.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);
}

Style homepage panels differently from category landing page panels

All of the CSS examples below will change category icon panel styles on both the homepage and category landing pages.

If you want to apply styles only to category landing pages, adjust the CSS you're adding to include this class at the beginning of the rule:

.hg-category-page

For example, instead of:

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

You'd use:

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