Error Fields

<form class="form mt-xl">
	<fieldset>
		<legend>Forms errors - list errors</legend>
		<p>Use class="error-fields" in each li when exist some labels with errors</p>
		<div class="callout-error">
			<h4>Error!</h4>
			There are mistakes in the form.
		</div>

		<ol>
			<li class="error-fields">
				<label for="text-field-error">Text Field 100%
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error" placeholder="Text field 100%" />
			</li>
			<li class="error-fields">
				<label for="text-field-error2">Text Field 100%
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error2" class="w-50" placeholder="Text field 50% - w-50" required />
			</li>
			<li>
				<label for="text-field-error2">Label without errors</label>
				<input type="text" id="text-field-error2" class="w-50" placeholder="Text field 50% - w-50" required />
			</li>
		</ol>
	</fieldset>

	<fieldset class="error-fields">
		<legend>Block div with errors</legend>
		<p>You can use class error-fields in a general box to fix all inputs like an error</p>
		<p class="callout-error ">
			There are mistakes in the form.
		</p>

		<ol>
			<li>
				<label for="text-field-error3">Label
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error3" placeholder="Text field 100%" />
			</li>
			<li>
				<label for="text-field-error4">Label
					<strong>Text error: Lorem ipsum dolor sit amet, is required</strong>
				</label>
				<input type="text" id="text-field-error4" placeholder="Text field 100%" />
			</li>
		</ol>
	</fieldset>
	<button type="submit" class="button-primary">Continue</button>
</form>