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

<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).

Inverse Form Example

Form Mix

<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" />