Developers
Authorization
API Resources
NL Interpreter
Search
Benti
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 thedisplayproperty.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
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>
</div>
<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>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
<div class="inbenta-km__rating__thanks">Thanks for your comment!</div>
</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 |