Form Size

Form elements sync with overall styling of evo text and colors. Use <input type="text">, <option>, and <textarea> tags.

Form Text Size

The easiest way to change the size of a form is to adjust the text size. Simply add a text class such as text-size-6 to the <input> tag. Text sizes 1-10 are demonstrated below.

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-10" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-9" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-8" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-7" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-6" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-5" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-4" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-3" />

<input type="text" name="text" placeholder="Text Input" class="evo-form-padding evo-form-box text-size-2" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box text-size-1" />

Form Size Utility

A form size utility sets a text size percentage relative to the base text size of a standard form. Create an <input> tag and apply the evo-form class for style, the form-padding class for structure, and the form-box class for the border. Add a form size class such as form-size-small. Default form styles are set in _evo_variables.scss.

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-size-large" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-size-medium" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-size-small" />

form-icon-size-[number]

A form icon size utility sets an icon size percentage relative to the base text size of a standard form. Create an <input> tag and apply the evo-form class for style, the form-padding class for structure, and the form-box class for the border. Add a form-icon-size-[number] class such as form-icon-size-6.

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-15 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-14 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-13 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-12 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-11 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-10 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-9 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-8 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-7 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-6 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-5 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-4 form-icon-email" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-3 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-2 form-icon-arrow" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box form-icon form-icon-size-1 form-icon-arrow" />

form-padding-[size]

A form padding utility has padding that is slightly wider than tall. Create an <input> tag and apply the evo-form class for structure. Add a form-padding-[size] class such as form-padding-thin. Default form styles are set in _evo_variables.scss.

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-box form-padding-thick" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-box form-padding-medium" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-box form-padding-thin" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-box form-padding-none" />

form-box-[size]

A form box utility also has a matching hover state. Create an <input> tag and apply the evo-form, form-padding, and form-box classes for structure. Add a evo-form-box-[size] class such as form-box-thin. Default form styles are set in _evo_variables.scss.

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box evo-form-box-thick" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box evo-form-box-medium" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box evo-form-box-thin" />

<input type="text" name="text" placeholder="Text Input" class="evo-form evo-form-padding evo-form-box evo-form-box-none" />

Form Mix

<input type="email" name="email" placeholder="Enter your email" class="evo-form evo-form-box evo-form-padding form-icon form-icon-size-8 form-icon-email width-half" />

<input type="text" name="text" placeholder="Text Input" class="evo-form form-padding-thin evo-form-box evo-form-box-medium form-size-small text-measure-3 form-focus-green" />