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 & 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 -->
<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>
<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
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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
<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
<div id="shopui-instalmentPlans"> <div class="instalmentPlan"> <img src="https://shopui.ekmsecure.com/2.1.13/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.13/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.13/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>