The purpose of the Results component is to display the results of a user query. It consists of the following elements and sub-elements:

• inbenta-km__results: the main container for the query results. It has the following sub-elements:
  • inbenta-km__results__button: the button that allows the user to go back once the search has been done.
  • inbenta-km__results__contents: the container for the results and the search query made by the user. It has the following sub-elements:
    • inbenta-km-title: title of the results component. It is hidden by default.
    • .inbenta-km-subtitle.contents__title: contains the phrase and the query made by the user, structured as follows:
      • contents__title__text
      • contents__title__query: the current query made by the user.
    • inbenta-km__faqs: the FAQs related to the search made by the user. This is the FAQ component.

Component image

No-results

HTML Structure

<div class="inbenta-km__results">
    <div class="inbenta-km__results__button">
        <div class="inbenta-km-button button__back inbenta-km-button--back">
            <span class="inbenta-km-button__icon"></span> 
            <span class="inbenta-km-button__text">Back</span>
        </div>
    </div>
    <div class="inbenta-km__results__contents">
        <div class="inbenta-km-title">Results</div>
        <div class="inbenta-km-subtitle contents__title">
            <div class="contents__title__text">Search results for</div>
            <div class="contents__title__query">'Lorem'</div>
        </div>
        <div class="inbenta-km__faqs">
            <div class="inbenta-km__faq">...</div>
        </div>
        <div class="contents__rating">...</div>
    </div>
</div>

CSS editable properties