Category Tile¶

Styles for the category tile component, used in the category_tile macro.

Structurally .category-tile contains following elements:

.category-tile__header
.category-tile__link
.category-tile__title
.category-tile__caption
.category-tile__image-wrapper
.category-tile__image

And following modifiers:

.category-tile__title_clamp
.category-tile__image-wrapper_first

Example¶

Here is an example of a category tile element usage:

HTML

<div class="category-tile">
    <h2 class="category-tile__header">
        <a class="category-tile__link" href="/category-url">
            <span class="category-tile__title">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>

Category Tile tags¶

The .category-tile classes are designed to be used with block elements like <div>, but you can use them with any element and customize as needed.

LESS¶

You can modify any category tile LESS variable in your User Less section to change category tile styles.

Category Tile variables¶

Variables used to style category tile:

@categoryTileImageHeight: 270px;
@categoryTileImageObjectFit: cover;
@categoryTileImageMargin: @globalSpacing;

@categoryTileCaptionMarginTop: @globalSpacing * 0.125;

To change the default image height, modify @categoryTileImageHeight variable:

@categoryTileImageHeight: 270px;

Category Tile styles¶

Here are standard category tile styles:

.category-tile {
    &__header {
        height: 100%;
    }

    &__link {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        &:hover {
            text-decoration: none;

            .category-tile__title {
                text-decoration: underline;
            }
        }
    }

    &__title {
        &_clamp {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            word-break: break-word;
            overflow: hidden;
        }
    }

    &__image {
        height: @categoryTileImageHeight;
        width: 100%;

        object-fit: @categoryTileImageObjectFit;

        &-wrapper {
            height: @categoryTileImageHeight;
            margin-top: @categoryTileImageMargin;

            &_first {
                order: -1;
                margin-top: 0;
                margin-bottom: @categoryTileImageMargin;
            }
        }
    }

    &__caption {
        margin-top: @categoryTileCaptionMarginTop;
        font-weight: @fontWeightNormal;
    }
}

Macros reference¶

category_tile