The Category component consists of a set of containers (.inbenta-km__categories .inbenta-km__categories__container) that in turn enables a number of sub-containers:

• container__category-name: contains the name (and optionally, an icon) of the current category.
• container__category: contains the main structure for the category display.
  It has the following sub-elements:
  • container__category__group: includes a group of categories within a row, in order to properly display any number of categories the user might have. If you modify display:flex, it may affect the correct use of Categories. However, all the categories are printed inside this element in a loop, like this:
    • inbenta-km__category: the main container of a given category. It has a brother class named inbenta-km__category--X, where X is the ID of the category itself and can be used to change its icon/image. This element has the following sub-elements:
      • inbenta-km__category__image: optional parameter to:
        • include an icon/image with the :before pseudo-class
        • include an icon/image with the background-image property
        • include an icon/image with a <img> tag
        • hide an icon/image with the display:none property
      • inbenta-km__category__content-category: contains the category name or title, and optionally, an icon in front of it.
        • content-category__icon
        • content-category__title
• container__category-contents: contains (if applicable) the FAQs related to that category/subcategory. It may include them directly using inbenta-km__faqs. For more information, see the FAQ documentation.

Component image - Main category structure

Component image - Subcategory structure

HTML Structure

<div class="inbenta-km__categories">
    <div class="inbenta-km-title">Categories</div>
    <div class="inbenta-km__categories__container">
        <div class="container__category-name">
            <div class="container__category-name__button-wrapper">
                <div class="inbenta-km-button inbenta-km-button--back">
                    <span class="inbenta-km-button__icon"></span> 
                    <span class="inbenta-km-button__text">Back</span>
                </div>
            </div>
            <span class="container__category-name__title">Luggage</span>
        </div>
        <div class="container__category">
            <div class="container__category__group">
                <div class="inbenta-km__category inbenta-km__category--X">
                    <span class="inbenta-km__category__image inbenta-km-icon"></span> 
                    <div class="inbenta-km__category__content-category">
                        <span class="content-category__icon inbenta-km-icon"></span> 
                        <span class="content-category__title">Lorem ipsum</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS editable properties