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

Categories component image

Component image - Subcategory structure

Subcategories component image

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>
            <span class="container__category-name__title">Luggage</span>
        <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>

CSS editable properties

Class Properties
.inbenta-km__categories margin
.inbenta-km-title Inherit from Globals
.inbenta-km__category background-color, border, border-radius, box-shadow, color ...
Category Image
.inbenta-km__category__image unused, can be used to add an image
.inbenta-km__category__image--X This class allows to change between different icons/images for each category - it's a declarational class
Category Content
.inbenta-km__category__content-category background-color, display, justify-content, align-items, flex-grow, min-height, padding, width
.content-category__icon This class is for the icon in front of the title. (Empty by default)
.content-category__title font, background ...
Subcategories Elements
.container__category-name margin
.container__category-name__title font
.container__category This element is strictly structural.
.container__category__group display
.container__category-contents This element is strictly structural.