Search Box

This component is a form consisting of three elements: form__icon, form__input and form__button.

You can use <span class="form__icon"></span> to add an additional icon in front of the form__input, either through the :before property, or by inserting a <img> tag. It is hidden by default.

Component image

Searchbar component image

HTML Structure

<div class="inbenta-km__search">
    <form class="inbenta-km__search__form">
        <span class="form__icon"></span> 
        <input class="inbenta-km-input form__input" type="text"> 
        <div class="form__button">
            <div class="inbenta-km-button inbenta-km-button--send">
                <span class="inbenta-km-button__icon"></span> 
                <span class="inbenta-km-button__text">Send</span>

CSS editable properties

Class Properties
.inbenta-km__search padding
.inbenta-km__search__form border-radius, box-shadow, display ...
.form__icon:before background-color, display, font, content
.inbenta-km-input.form__input inherit from global & some overwrites
.form__button .inbenta-km-button inherit from global & some overwrites
.inbenta-km-button .inbenta-km-button__icon inherit from global
.form__button .inbenta-km-button__icon:before inherit from global & content
.form__button .inbenta-km-button__text hidden by default