Ratings Styles

The Rating component has three sub-components, which remain hidden until the user navigates through the component. These sub-components are:

  • inbenta-km__rating__content: contains a string of text and the rating buttons, for yes/no options. It has two sub-elements:
    • content__phrase: the rating phrase or question.
    • content__buttons: the buttons container.
  • inbenta-km__rating__comment: contains a text field where the user can give feedback, and the send button. It only appears if the user has selected 'No' as a rating option. It has two sub-elements:
    • comment__phrase: the text asking the user to give feedback. It can be disabled using the display property.
    • comment__feedback: contains a text field and the send button. It has two sub-elements:
      • comment__feedback__textarea: the text field.
      • inbenta-km-button: the send feedback button. It is disabled by default until the user types something in the field.
  • inbenta-km__rating__thanks: the exit message thanking the user for their feedback.

Component image

Rating component image

HTML Structure

<div class="inbenta-km__rating">
    <div class="inbenta-km__rating__content">
        <div class="content__phrase">Was this answer helpful?</div>
        <div class="content__buttons">
            <div class="content__buttons__button-wrapper">
                <div class="inbenta-km-button inbenta-km-button--yes">
                    <span class="inbenta-km-button__icon"></span>
                    <span class="inbenta-km-button__text">Yes</span>
            <div class="content__buttons__button-wrapper">
                <div class="inbenta-km-button inbenta-km-button--no">
                    <span class="inbenta-km-button__icon"></span> 
                    <span class="inbenta-km-button__text">No</span>
    <div class="inbenta-km__rating__comment">
        <div class="comment__phrase">Why this content is not correct?</div>
        <div class="comment__feedback">
            <textarea class="inbenta-km-input comment__feedback__textarea"></textarea>
            <div class="comment__feedback__button">
                <div class="inbenta-km-button inbenta-km-button—-disabled inbenta-km-button--send">
                    <span class="inbenta-km-button__icon"></span> 
                    <span class="inbenta-km-button__text">Send</span>
    <div class="inbenta-km__rating__thanks">Thanks for your comment!</div>

CSS editable properties

Class Properties
.inbenta-km__rating background-color, border-radius, margin, padding, width
Rating Content
.inbenta-km__rating__content display,align-items,justify-content
.content__phrase font-size,font-weight,font-family,margin
.content__buttons display, align-items
Rating Comment
.inbenta-km__rating__comment This element is strictly structural
.comment__phrase font-size,font-weight,font-family,margin
.comment__feedback display, align-items,justify-content,margin
.comment__feedback__textarea border, border-radius, resize, height, margin, padding, width
.comment__feedback__button This element is strictly structural
Rating Thanks
.inbenta-km__rating__thanks font-weight, font-family, padding

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73