Form Effect

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

label-floating

<span class="input-container">
<input type="text" name="text" class="evo-form-box" required />
<label class="label-floating">Label</label>
</span>

Create a <input type="text"> tag, and place a <label> tag below it (not above). Apply the label-floating tag to the label, and the input-container tag to a span that contains the label and the input. Default form styles are set in _variables.scss.

form-focus

<???????????span class="input-container">
<input type="text" name="text" class="evo-form-box" required />
<label class="label-floating">Label</label>
</span>

Create a <input type="text"> tag, and place a <label> tag below it (not above). Apply the label-floating tag to the label, and the input-container tag to a span that contains the label and the input. Default form styles are set in _variables.scss.

form-focus

<???????????span class="input-container">
<input type="text" name="text" class="evo-form-box" required />
<label class="label-floating">Label</label>
</span>

Create a <input type="text"> tag, and place a <label> tag below it (not above). Apply the label-floating tag to the label, and the input-container tag to a span that contains the label and the input. Default form styles are set in _variables.scss.

demo classes

<???????????span class="input-container">
<input type="text" name="text" class="evo-form-box" required />
<label class="label-floating">Label</label>
</span>

Classes are available that demonstrate a fix state, for style guide purposes. Create a <input type="text"> tag, and place a <label> tag below it (not above). Apply the label-floating tag to the label, and the input-container tag to a span that contains the label and the input. Default form styles are set in _variables.scss.