Text input

<div class="c-text-input has-b-btm-marg">
  <h3 class="has-s-btm-marg">Valid state example</h3>
  <label for="firstName" class="l-display-block has-xxxs-btm-marg t-size-s">
    <strong>First name</strong>
  </label>
  <input id="firstName" name="firstName" type="text" value="Cosmo Kramer" class="c-text-input__input l-display-block l-width-full has-text-gray-dark t-lh-b t-size-xs">
</div>

<div class="c-text-input">
  <h3 class="has-s-btm-marg">Invalid state example</h3>
  <label for="firstName" class="l-display-block has-xxxs-btm-marg t-size-s">
    <strong>First name</strong>
  </label>
  <input id="firstName" name="firstName" type="text" value="Cosmo Kramer" class="c-text-input__input is-invalid l-display-block l-width-full has-text-gray-dark has-xxxs-btm-marg t-lh-b t-size-xs" aria-invalid="true">
  <ul>
    <li class="has-text-error has-xxxs-btm-marg t-size-xs">
      First validation error
    </li>
    <li class="has-text-error t-size-xs">
      Second validation error
    </li>
  </ul>
</div>