Field

Vertical group of label, control, description, and error. .field-group stacks fields. .field-separator is the “Or continue with” rule (text in a child element). There is no wrapper.

Preview

Code

<div class="field-group">
	<div class="field">
		<button class="button button-outline" type="button">Continue with a provider</button>
	</div>
	<div class="field-separator"><span>Or continue with</span></div>
	<div class="field">
		<label class="label" for="email">Email</label>
		<input class="input" id="email" type="email" placeholder="m@example.com">
		<p class="field-description">We will not share your email.</p>
	</div>
</div>