// Change the modifier class to modify the style
// alert-message--success || alert-message--attention || alert-message--error
// Add `color-inverse` as an optional modifier class to flip the colours
// Add role="alert" for warning/error messages

<p class="alert-message alert-message--success color-inverse">
{% render 'icon-alert' %}
	// Message Text
	<span>Success</span>
</p>
			

				// Change the modifier class to modify the style
// button--primary || button--secondary || button--tertiary || button--success || button--warning || button--warning
// Add `color-inverse` as an optional modifier class to flip the colours
// Add the `disabled` attribute to disable

<button class="button button--primary color-inverse"
	type="button"
>
	Shop Now
</button>
			

				// Change the modifier class to modify/display any associated alert message and styles
// custom-input--error || custom-input--attention || custom-input--success

<label class="custom-input custom-input--error" for="label-1">

	// Add or remove the `visually-hidden` class to toggle text visibility

	<span class="visually-hidden">Checkbox Label</span>

	<span class="custom-input__icon">

		// Add or remove the "disabled" attribute to disable the input and apply associated styling

		<input id="label-1" name="label-1" type="checkbox">

		// Optionally render an SVG here below the input - if left empty, the default will be used

	</span>

	// Not every alert is required to be added, only what you intend to render
	// These will be completely hidden unless the appropriate modifier class has been added to the parent container

	<p class="alert-message alert-message--error color-inverse" role="alert">
		{% render 'icon-alert' %} <span>Error</span>
	</p>
	<p class="alert-message alert-message--attention" role="alert">
		{% render 'icon-alert' %} <span>Warning</span>
	</p>
	<p class="alert-message alert-message--success color-inverse">
		{% render 'icon-alert' %} <span>Success</span>
	</p>

</label>
		

				// Change the modifier class to modify/display any associated alert message and styles
// custom-input--error || custom-input--attention || custom-input--success

<label class="custom-input custom-input--error" for="textarea-input-1">

	// Add or remove the `visually-hidden` class to toggle text visibility

	<span class="visually-hidden">Checkbox Label</span>

	<span class="custom-input__field">

		// Add or remove the "disabled" attribute to disable the input and apply associated styling

		<textarea
			id="textarea-input-1
			name="textarea-input-1"
		></textarea>

	</span>

	// Not every alert is required to be added, only what you intend to render
	// These will be completely hidden unless the appropriate modifier class has been added to the parent container

	<p class="alert-message alert-message--error color-inverse" role="alert">
		{% render 'icon-alert' %} <span>Error</span>
	</p>
	<p class="alert-message alert-message--attention" role="alert">
		{% render 'icon-alert' %} <span>Warning</span>
	</p>
	<p class="alert-message alert-message--success color-inverse">
		{% render 'icon-alert' %} <span>Success</span>
	</p>

</label>