<p>
<label class="error">This is what happens when you do it wrong</label>
<input class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label class="error">This is what happens when you do it wrong</label>
<input class="is-error" type="text" placeholder="Text Input">
</p>
/* No context defined for this component. */
Updated :focus to use $brand-secondary, which is currently Blue. Needs checking.
Class is-valid (green outline) will probably need to be added via JS on-the-fly when correct input is detected.