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 evo-text-6 to the <input> tag. Text sizes 1-10 are demonstrated below.

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

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

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

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

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

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

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

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

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

<input type="text" name="text" placeholder="Text Input" class="evo-form form-padding form-box evo-text-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 _variables.scss.

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

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

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

Form Padding Utility

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 class such as form-padding-thin. Default form styles are set in _variables.scss.

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

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

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

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

Form Box Utility

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

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

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

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

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

Form Utility Example

Create a <button> tag and apply the .evo-button class for structure. Add .button-size-small and .button-padding-none and .button-box-thin classes for styling. Default button styles are set in _variables.scss.

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

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