Evo

Form

Form elements sync with overall styling of evo text and colors. Use <input>, <select>, and <textarea> tags. Add attributes to the HTML tags as needed, such as autofocus, required, or multiple.

containers and labels

Legend (visible) Legend (visully hidden)
<form>
 <fieldset>
  <legend>Legend (visible)</legend>
  <legend class="visually-hidden">Legend (visully hidden)</legend>
   <!-- place form inputs here -->
  </fieldset>
</form>

Create the <form> tag, with a <fieldset> tag nested inside, followed by a <legend> tag and text. Apply the visually-hidden class to the legend in order to hide it (except for screen readers).

Form Example

Please sign in.
Forgot password?


Inverse Form Example

Please sign in.
Forgot password?


Form Mix

Legend
<input type="text" name="username" placeholder="username" class="evo-form evo-form-padding-line evo-form-line form-line-medium evo-form-placeholder evo-form-hover evo-form-focus margin-bottom-3 text-bold text-uppercase" />

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

Create an <input type="text"> tag and apply any box classes. Default input button styles are set in _evo_variables.scss. See the "buttons" section for more styles.

<input type="submit" class="evo-button solid-to-ghost width-auto" />