Text Fields
<input type="email" class="shopui-text-field" placeholder="Example: john@example.com">
Only your name & location will be shown on your review once published
<div class="shopui-form-row shopui-form-row--stacked">
	<div class="shopui-form-row__details">
		<label for="review_author_email" class="shopui-label"><span class="required-text">*</span> Email Address</label>
	</div>
	<div class="shopui-form-row__field">
		<div class="shopui-validation ">
			<input type="email" id="review_author_email" class="shopui-text-field u-margin-bottom--small" placeholder="Example: JohnSmith@test.com">
			<div class="u-font-size--small u-text-align--left">Only your name &amp; location will be shown on your review once published</div>
		</div>
	</div>
</div>	

<input type="email" class="shopui-text-field shopui-text-field--valid" placeholder="Example: john@example.com">
<input type="email" class="shopui-text-field shopui-text-field--invalid" placeholder="Example: john@example.com">
Select Fields
<div class="shopui-select-field">
	<select>
		<option value="Stupid Option 1">Stupid Option 1</option>
		<option value="Stupid Option 2">Stupid Option 2</option>
		<option value="Stupid Option 3">Stupid Option 3</option>
		<option value="Stupid Option 4">Stupid Option 4</option>
	</select>
	<i class="shopui-icon shopui-icon-angle-down shopui-select-field__icon"></i>
</div>
Character Count
Requires a id and maxlength added to the input to textarea to work. 




<input type="email" id="counterField1" class="shopui-text-field shopui-text-field-counter" maxlength="100">

<textarea type="text" id="counterField2" class="shopui-text-field shopui-text-field-counter" maxlength="250"></textarea>
Password Field
<span class="shopui-password-field">
	<input type="password" id="password" class="shopui-text-field shopui-password-field__field shopui-password-field__field--password">
	<input type="text" class="shopui-text-field shopui-password-field__field shopui-password-field__field--text">
	<a href="#" class="shopui-password-field__button" data-hide-text="Hide Password" data-show-text="Show Password"></a>
</span><!-- .shopui-password-field -->
Field Validation
<div class="shopui-validation shopui-validation--valid">
	<input type="email" id="emailAddress" class="shopui-text-field shopui-text-field--valid" placeholder="Example: john@example.com">
</div><!-- .shopui-validation -->
Password Incorrect
<div class="shopui-validation shopui-validation--invalid">
	<input type="email" id="emailAddress" class="shopui-text-field shopui-text-field--invalid" placeholder="Example: john@example.com">
	<div class="shopui-validation__bubble">
		<div class="shopui-validation__message">Password Incorrect</div>
	</div><!-- .shopui-validation__bubble -->
</div><!-- .shopui-validation -->
Buttons
<button class="shopui-button shopui-button--primary">Primary Button</button>
<button class="shopui-button shopui-button--secondary">Secondary Button</button>
<button class="shopui-button" disabled>Disabled Button</button>
<button class="shopui-button">Default Button</button>
Link Button 
<a href="#" class="shopui-button shopui-button--link">Link Button</a>
<button class="shopui-button shopui-button--inline">Inline Button</button>
<button class="shopui-button shopui-button--primary shopui-button--inline">Inline Primary Button</button>
<button class="shopui-button shopui-button--secondary shopui-button--inline">Inline Secondary Button</button>
<button class="shopui-button shopui-button--inline shopui-button--small">Small Button</button>
<button class="shopui-button shopui-button--inline shopui-button--medium">Medium Button</button>
<button class="shopui-button shopui-button--inline shopui-button--large">Large Button</button>
Image Upload States
<div class="imageUploadPicker">
	<div class="spinnerContainer">
			<i class="shopui-icon shopui-icon-plus shopui-icon-2x"></i>
		</div>
</div>	

<div class="imageUploadPreview">
	<div class="overlay">
		<div class="spinnerContainer">
			<div class="spinner"></div>
		</div>
	</div>
	<a>
		<img src="/images/Products/Jordans.png">
	</a>
</div>

<div class="imageUploadPreview">
	<button class="actionButton"><i class="shopui-icon shopui-icon-times"></i></button>
	<a>
		<img src="/documentation/images/Products/Jordans.png">
	</a>
</div>
Image failed to upload. Please try again. 
<div class="shopui-validation--error">
	<div class="imageUploadPreview">
		<div class="overlay">
			<div class="spinnerContainer">
				<i class="shopui-icon shopui-icon-times-circle-o shopui-icon-4x"></i>
			</div>
		</div>
		<a>
			<img src="/images/Products/Jordans.png">
		</a>
	</div>
	<div class="shopui-validation__bubble">
		<div class="shopui-validation__message">Image failed to upload. Please try again.</div>
	</div><!-- .shopui-validation__bubble -->
</div>
Form Rows
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="shopui-form-row shopui-form-row--sbs">
	<div class="shopui-form-row__details">
		<label for="stackedForm" class="shopui-label">Side By Side Form Row</label>
		<div class="shopui-label-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
	</div><!-- .shopui-form-row__details -->
	<div class="shopui-form-row__field">
		<div class="shopui-validation">
			<input type="email" id="stackedForm" class="shopui-text-field" placeholder="Example: john@example.com">
		</div><!-- .shopui-validation -->
	</div><!-- .shopui-form-row__field -->
</div><!-- .shopui-form-row -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="shopui-form-row shopui-form-row--stacked">
	<div class="shopui-form-row__details">
		<label for="stackedForm" class="shopui-label">Stacked Form Row</label>
		<div class="shopui-label-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
	</div><!-- .shopui-form-row__details -->
	<div class="shopui-form-row__field">
		<div class="shopui-validation">
			<input type="email" id="stackedForm" class="shopui-text-field" placeholder="Example: john@example.com">
		</div><!-- .shopui-validation -->
	</div><!-- .shopui-form-row__field -->
</div><!-- .shopui-form-row -->
Message Banner
Generic Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Generic Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Information Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message shopui-message--info">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Information Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Success Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message shopui-message--success">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Success Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Locked Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message shopui-message--locked">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Locked Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Warning Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message shopui-message--warning">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Warning Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Error Banner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat. 
<div class="shopui-message shopui-message--error">
	<div class="shopui-message__icon"></div>
	<div class="shopui-message__content">
		<div class="shopui-message__title">Error Banner</div>
		<div class="shopui-message__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at facere minus assumenda quidem ratione repellat.</div>
	</div><!-- .shopui-message__content -->
</div><!-- .shopui-message -->
Overlay Spinner

Adding to "Saved Items"
Nike Air Jordan 1 Mid SE
Size: 9 Mens
Colour: Black / Barely Volt / White / Red
Style: CV401-2001
Remove
£123.99
1
£123.99 
<div class="overlayContainer">
	<div class="overlay">
		<div class="spinnerContainer">
			<div class="spinner"></div>
			<br>
			<div class="spinnerText">
				Adding to "Saved Items"
			</div>
		</div>
	</div>
	<div class="shopui-order-item">
		<div class="shopui-order-item__image"><img src="/images/Products/Jordans.png"></div>
		<div class="shopui-order-item__details">
			<div class="shopui-order-item__name">Nike Air Jordan 1 Mid SE</div>
			<div class="shopui-order-item__option">
				Size: 9 Mens<br>
				Colour: Black / Barely Volt / White / Red<br>
				Style: CV401-2001
			</div><!-- .shopui-order-item__option -->
			<div class="shopui-order-item__review-link">
				<a>Remove</a>
			</div>
			<!--shopui-order-item__review-link-->
		</div><!-- .shopui-order-item__details -->
		<div class="shopui-order-item__price">
			£123.99
		</div><!-- .shopui-order-item__price -->
		<div class="shopui-order-item__qty">
			1
		</div><!-- .shopui-order-item__qty -->
		<div class="shopui-order-item__subtotal">
			£123.99
		</div><!-- .shopui-order-item__subtotal -->
	</div><!-- .shopui-order-item -->
</div>
Divider
<hr class="borderTransparent">
Instalment Plans

Make 6 weekly payments of £0.17.

Interest free. Learn More

Make 6 weekly payments of £0.17.

Interest free. Learn More

<div id="shopui-instalmentPlans">
	<div class="instalmentPlan">
		<img src="https://shopui.ekmsecure.com/2.1.12/images/card-payment/Laybuy.svg">
		<p>
			Pay 6 weekly, installments of <span class="u-font-weight--bold">£52.50</span>.
		</p>
		<p>
			Interest free. <a class="u-font-weight--bold">Learn more</a></p>
	</div>
	<div class="instalmentPlan">
		<img src="https://shopui.ekmsecure.com/2.1.12/images/card-payment/Clearpay.svg">
		<p>
			Pay 6 monthly installments of <span class="u-font-weight--bold">£52.50</span>.
		</p>
		<p>
			Interest free. <a style="font-weight: 900;">Learn more</a></p>
	</div>
	<div class="instalmentPlan">
		<img src="https://shopui.ekmsecure.com/2.1.12/images/card-payment/Klarna.svg">
		<p>
			Pay in 3 monthly installments of <span
				class="u-font-weight--bold">£105.00</span>.
		</p>
		<p>
			Interest free. <a class="u-font-weight--bold">Learn more</a></p>
	</div>
</div>