Skip to content

Visual Subcategories

Styles for the visual subcategories component, used in the visual_subcategories module to display subcategories in a grid or carousel layout.

Structurally .visual-subcategories overrides some Category Tile styles. The styles provide layout, color, and hover effects specific to subcategories tiles and their elements.

Example

HTML
<nav class="visual-subcategories">
    <div class="category-tile">
        <h2 class="category-tile__header">
            <a class="category-tile__link" href="/category-url">
                <span class="category-tile__title category-tile__title_clamp">Category Name</span>
                <span class="category-tile__caption">Products: 12</span>
                <div class="category-tile__image-wrapper">
                    <img class="category-tile__image" src="/img/category.jpg" alt="" />
                </div>
            </a>
        </h2>
    </div>
</nav>

LESS

You can modify any visual subcategories LESS variable in your User Less section to change visual subcategories styles.

Visual Subcategories variables

Variables used to style visual subcategories:

@visualSubcategoriesCategoryTileBgColor: var(--visualSubcategoriesTileBgColor, @globalBodyBackgroundColor);

@visualSubcategoriesCategoryTileTextDecorationColorHover: var(--visualSubcategoriesTileTextColor, @globalFontColor);

@visualSubcategoriesCategoryTileHeaderColor: var(--visualSubcategoriesTileTextColor, @globalFontColor);
@visualSubcategoriesCategoryTileHeaderColorHover: var(--visualSubcategoriesTileTextColor, @globalFontColor);

@visualSubcategoriesCategoryTileCaptionColor: var(--visualSubcategoriesTileTextColor, @globalFontColorSecondary);
@visualSubcategoriesCategoryTileCaptionColorHover: var(--visualSubcategoriesTileTextColor, @globalFontColorSecondary);

To change the default background color for category tiles in the visual subcategories, modify @visualSubcategoriesCategoryTileBgColor variable:

@visualSubcategoriesCategoryTileBgColor: red;

Visual Subcategories styles

Here are standard visual subcategories styles:

.visual-subcategories {
    .category-tile {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &__image {
            &-wrapper {
                background-color: @visualSubcategoriesCategoryTileBgColor;
            }
        }

        &__link {
            color: @visualSubcategoriesCategoryTileHeaderColor;

            .category-tile__caption {
                color: @visualSubcategoriesCategoryTileCaptionColor;
                text-decoration: none;
            }

            &:hover {
                text-decoration-color: @visualSubcategoriesCategoryTileTextDecorationColorHover;
                color: @visualSubcategoriesCategoryTileHeaderColorHover;

                .category-tile__caption {
                    color: @visualSubcategoriesCategoryTileCaptionColorHover;
                }
            }
        }
    }
}

Modules reference

Macros reference