Code

					
<h3>
	<button type="button" class="accordionHeader displayFlex flexNoWrap flexAlignItemsCenter flexSpaceBetween text18 textSemiBold padding10 bkgdLtGray fullWidth darkestLink pointer" aria-expanded="false" aria-controls="SaleSection">
		<span class="marginRight15">Accordion Header Text</span>
		<svg class="arrowIcon" height="20px" width="20px" aria-hidden="true" focusable="false"><use xlink:href="#svgIcon-arrowSolid"></use></svg>
	</button>
</h3>
<div id="SaleSection" class="accordionPanel" aria-hidden="true">
	<div class="borderMdGray padding10">
		<p>Here is some content in my accordion - Whoop! Whoop!</p>
	</div>
</div>        			
					
				

Code

					
<div class="alertBoxFlex displayFlex flexNoWrap">
	<svg class="alertBulb" height="25px" width="25px" aria-hidden="true"><use xlink:href="#svgIcon-hint"></use></svg>
	<p class="alertText">
		<span class="textSemiBold">Your order is not complete until you click the 'Place Order' button.</span><br />
		Once you've completed checking out, an option is provided to upload your art file(s).
		Remember, your Customer Service Representative will always contact you to confirm your order details before it goes into production.<br />
	</p>
</div>
					
				

Code

					
<div class="displayFlex textDarkestGray bkgdLtGray paddingTop10 paddingBtm10 marginTop10 marginBtm10">
	<div class="displayFlex flexRow flexNoWrap flexAlignItemsCenter layoutCenter">
		<img src="//cdn.4imprint.com/qtz/headers/tags/6736/images/the_north_face_logo.svg" height="80" width="80" class="hideOnMedium margin20" alt="The North Face">
		<h1 class="textNormal text25">Your logo on The North Face Branded Apparel</span></h1>
	</div>	
</div>
					
				

Code

					
<section aria-labelledby="holidayHdr" class="layoutCenter1500 flexAlignItemsCenter borderDkRed textDarkestGray displayFlex padding10 margin10 roundCorners3">
	<div class="padding5 text16">
		<h2 id="holidayHdr" class="textDkRed">HOLIDAY INFO:</h2>
	</div>
	<p>Due to shipping volumes during the holiday season, to ensure <span class="textSemiBold">delivery by December 22</span>, we highly recommend placing your order on or by Tuesday, December 19, 2023, using Next Day Air shipping. If you need assistance or have any questions about delivery for the holidays, please call customer service.</p>
	<p class="marginTop10">Note: Some <span class="textSemiBold">24-hour store items may not be available from December 21 to January 3</span>. For assistance with orders in this period, please call customer service.</p>
</section>
					
				

Code

					
<#below#>
	<#lowerSeoCopy#>
		<h2 class="marginTop10">Additional Copy Heading</h2>
		<p>Additional Copy. Enter copy here if there is additional seo copy beyond the tips. This will appear above the tips at the bottom of the page. You can include any html here (h2, p, span).</p>
	<#/lowerSeoCopy#>
	<#empTipCopy#>
		 Single tip copy here. Tip copy section is already pre-styled within template/css. Can include additional spans for styling but only if needed.
	<#/empTipCopy#>
<#/below#>
					
				

Code

					
<#below#>
	<#lowerSeoCopy#>
		<h2 class="marginTop10">Additional Copy Heading</h2>
		<p>Additional Copy. Enter copy here if there is additional seo copy beyond the tips. This will appear above the tips at the bottom of the page. You can include any html here (h2, p, span).</p>
	<#/lowerSeoCopy#>
	<#empTipCopy#>
		 Single tip copy here. Tip copy section is already pre-styled within template/css. Can include additional spans for styling but only if needed.
	<#/empTipCopy#>
<#/below#>


<#below#>
<#lowerSeoCopy#>
<p class="lowerSeoHeading">Additional Copy Heading, per seo team, leave any headings as paragraph tags not h2</p>
<p>Additional Copy. Enter copy here if there is additional seo copy beyond the tips. This will appear above the tips at the bottom of the page. You can wrap copy in a (span) as needed.</p>
<ul class="c-md-10 c-sm-quarter-4 c-xs-full">
	<li><span class="textSemiBold">Bulletpoint</span>. Additional bullet point copy here.</li>
	<li><span class="textSemiBold">Bulletpoint</span>. Additional bullet point copy here.</li>
	<li><span class="textSemiBold">Bulletpoint</span>. Additional bullet point copy here.</li>
	<li><span class="textSemiBold">Bulletpoint</span>. Additional bullet point copy here.</li>
</ul>
<#/lowerSeoCopy#>

<#empTipFirst#>
First tip copy here.
<#/empTipFirst#>

<#empTipSecond#>
Second tip copy here.
<#/empTipSecond#>

<#empTipThird#>
Third tip copy here.
<#/empTipThird#>

<#whyOrderHeading#>Why Order XXXXXXXXXXXXXXXX Through 4imprint?<#/whyOrderHeading#>
<#whyOrderAccordion#>
<p><span class="textSemiBold">Semi bold text</span> Text here. If copy contains 360&deg; Guarantee<sub>®</sub> text, be sure to mark up using degree and subscript registration mark.</p>
<p><span class="textSemiBold">Semi bold text</span> Text here. This copy can contain hyperlinks to urls within the 4imprint website. If linking to external website, be sure to include target="_blank" rel="noopener" as well as <span class="visually-hidden"> opens in new window</span> on the link.</p>
<p><span class="textSemiBold">Semi bold text</span> Text here.</p>
<p><span class="textSemiBold">Semi bold text</span> Text here.</p>
<p><span class="textSemiBold">Semi bold text</span> Text here.</p>
<#/whyOrderAccordion#>
			
<#discoverAccordion#>
<p>Text here. If copy contains 360&deg; Guarantee<sub>®</sub> text, be sure to mark up using degree and subscript registration mark.</p>
<p>Text here. This copy can contain hyperlinks to urls within the 4imprint website. If linking to external website, be sure to include target="_blank" rel="noopener" as well as <span class="visually-hidden"> opens in new window</span> on the link.</p>
<#/discoverAccordion#>
<#/below#>


					
				

Code (Colored)

					
<button type="button" class="button-md bkgdBlue text16">Hello</button>					
					
				

Code (White)

					
<button type="button" class="button-md bkgdWhite text16">Hello</button>					
					
				

Code

					
<button type="button" class="button-lg text16 disabledBtn">Disabled</button>					
					
				

Code (Heading)

					
<h2 class="formHeading">Form Heading</h2>
					
				

Code (Sub Heading)

					
<h3 class="formSubHeading" >Email and Password</h3>
					
				

Code

					
<div class="form-group">
	<label for="CardCCV">Security Code*</label>
	<div class="form-input-tip">
		<div>
			<input type="text" id="CardCCV" name="CardCCV" class="txtReq input-control FormAbandonmnetLog txtReq input-control" data-val="true" data-val-required="Please enter a valid security code." aria-required="true" autocomplete="cc-csc" inputmode="numeric" data-val-regex="Please enter a valid security code." data-val-regex-pattern="^\d{3,4}$" title="Please enter a valid security code." value="">
			<span class="errorMessage hide"></span>
		</div>
		<div class="tooltipWrapper inlineMiddle textCenter">
			<button class="tooltipTrigger alignRight btnToHyp darkestLink padding10" aria-expanded="false" aria-describedby="cvvTooltip">
				<svg class="show" height="25px" width="25px" focusable="false" role="img" aria-label="CVV Tooltip"><title>CVV Tooltip</title><use xlink:href="#svgIcon-tooltip"></use></svg>
			</button>
			<div role="tooltip" id="cvvTooltip" aria-hidden="true">
					<p>This is the 3-4 digit number on the back or front of your card.</p>
				</div>
			</div>
	</div>
</div>
					
				

Code

					
<div class="form-group-multi">
	<div class="form-group">
		<label class="formField-third-2 formFieldLeft" for="State">State*</label>
		<select id="State" class="FormSelect txtReq input-control FormAbandonmnetLog" title="Please select a state." name="State" autocomplete="address-level1" aria-required="true">
	 		<option value="">Select </option>
			<option value="AK">AK </option>
			<option value="AL">AL </option>
		</select>
		<span class="errorMessage hide"></span>
	</div>
	<div class="form-group">
		<label for="ZipCode">Zip Code*</label>
		<input id="ZipCode" class="txtReq input-control FormAbandonmnetLog" title="Please enter a zip code." name="ZipCode" autocomplete="postal-code" type="text" aria-required="true">
		<span class="errorMessage hide"></span>
	</div>
</div>
					
				

Code

					
<p class="reqdHint">Starred(*) fields are required.</p>
					
				

					
<div class="form-group">
	<label for="Email">Email* ([email protected])</label>
	<input id="Email" class="txtReq input-control" name="Email" title="Please enter a valid email." autocomplete="email" aria-required="true" type="email" >
	<span class="errorMessage hide"></span>
</div>
					
				

Code

					
<div class="form-group">
	<label for="Notes">Notes (optional)</label>
	<textarea id="Notes" name="Notes"> </textarea>
</div>
					
				

Code

					
<p id="passwordHints" class="textDkGray textSemiBold text14">Password Requirements:</p>
<ul class="paddingLeft15 text14 textDkGray">
	<li>Minimum 8 characters</li>
	<li>Cannot be well-known commonly used password</li>
	<li>Must meet 3 of the 4 following criteria:
		<ul>
			<li>At least one lowercase letter [a-z]</li>
			<li>At least one uppercase letter [A-Z]</li>
			<li>At least one number [0-9]</li>
			<li>At least one symbol [!@#^&*()+_,.{}?~]</li>
		</ul>
	</li>
</ul>
<div class="form-group posRelative">
	<label for="Password">Password* (6 character minimum)</label>
	<input id="Password" class="txtReq input-control FormAbandonmnetLog" name="Password" title="Password must be at least 6 characters long." autocomplete="password" aria-required="true" type="password" data-val-length-max="50" data-val-length-min="6">
	<button type="button" aria-label="Show/Hide Password" aria-pressed="false" toggle="Password" class="pointer eyeIcon field-icon toggle-password"></button>
	<span class="errorMessage hide">Please enter a password.</span>
</div>
<div class="form-group posRelative">
	<label for="ConfirmPassword">Confirm Password*</label>
	<input id="ConfirmPassword" class="txtReq input-control FormAbandonmnetLog" name="ConfirmPassword" title="Please confirm your password." autocomplete="new-password" aria-required="true" type="password" data-val-length-max="50" data-val-length-min="6">
	<button type="button" aria-label="Show/Hide Confirm Password" aria-pressed="false" toggle="ConfirmPassword" class="pointer eyeIcon field-icon toggle-password"></button>
	<span class="errorMessage hide">Please confirm your password.</span>
</div>
					
				

Code

					
<fieldset class="marginBtm15">
	<legend>Radio Button Options</legend>
	<input class="rdbReq" id="yes" type="radio" name="radioExample" value="Yes">
	<label for="yes">Yes</label>
			
	<input class="rdbReq" id="no" type="radio" name="radioExample" value="No">
	<label for="no">No</label>
</fieldset>
<fieldset class="marginBtm15">
	<legend>Disabled Radio Button Options</legend>
	<input class="rdbReq" id="disabled" type="radio" name="radioExampleDisabled" value="Disabled" disabled>
	<label for="disabled">Disabled</label>
			
	<input class="rdbReq" id="checkDisabled" type="radio" name="radioExampleDisabled" value="Checked and Disabled" disabled checked>
	<label for="checkDisabled">Checked + Disabled</label>
</fieldset>
					
				

Code

					
<fieldset class="marginBtm15">
	<legend>Checkbox Options</legend>
	<input id="one" type="checkbox" name="one">
	<label for="one">One</label>
				
	<input id="two" type="checkbox" name="two">
	<label for="two">Two</label>
				
	<input id="three" type="checkbox" name="three">
	<label for="three">Three<label>
</fieldset>
<fieldset class="marginBtm15">
	<legend>Disabled Checkbox Options</legend>
	<input id="disabledCheckBox" type="checkbox" name="disabledCheckBox" disabled>
	<label for="disabledCheckBox">Disabled</label>
				
	<input id="disabledCheckCheckBox" type="checkbox" name="disabledCheckCheckBox" checked disabled>
	<label for="disabledCheckCheckBox">Checked + Disabled</label>
</fieldset>
					
				

Code

					
<button id="btnExample" class="button-lg text16 bkgdBlue" type="button">Create Account</button>
					
				

Code

					
<p role="alert" aria-atomic="true">
	<svg class="textDarkestGray roundCorners5 bkgdGreen inlineMiddle" height="30px" width="30px" aria-hidden="true" focusable="false"><use xlink:href="#svgIcon-checkMark"></use></svg>
	<span class="inlineMiddle textSemiBold textBlue text18">Your form submitted successfully!</span>
</p>
					
				

Code

					
<a href="/" class="headerLogo noLine inlineMiddle posRelative">
	<svg class="textBlue" height="53px" width="138px" role="img" aria-label="4imprint"><use xlink:href="#svgLogo-4imprint"></use></svg>
	<span class="localeName">USA</span>
</a>
					
				

Code

					
<div class="dotdLogoSm">
	<div class="displayFlex">
		<span class="textDeal textBlue textBold">deal</span>
		<span class="textOf textDarkestGray">of</span>
	</div>
	<div class="displayFlex">
		<span class="textThe textDarkestGray">the</span>
		<span class="textDay textBlue textBold">day</span>
	</div>
</div>
					
				

Code

					
<svg class="outletLogo" width="102px" height="55px" focusable="false"><title>4imprint Outlet</title><use xlink:href="#svgLogo-outlet"></use></svg>
					
				

Code

					
<img loading="lazy" src="//cdn.4imprint.com/qtz/icons/svg/outlet/stealadeal_2020.svg" alt="Outlet Steal a Deal" width="85" height="54" />
					
				

Code

					
<svg height="54px" width="80px" role="img" aria-label="Steal a Deal"><title>Steal a Deal</title><use xlink:href="#svgLogo-sad"></use></svg>
					
				

Code

					
<a class="darkestLink show" href="/product/114238/Confetti-Stadium-Cup-17-oz" title="View the Confetti Stadium Cup">
	<img class="responsiveImg" loading="lazy" srcset="//cdna.4imprint.com/prod/250/404183.jpg 250w,
		//cdna.4imprint.com/prod/150/404183.jpg 150w,
		//cdna.4imprint.com/prod/300/404183.jpg 300w"
			sizes="(max-width: 400px) 250px,
				(max-width: 600px) 300px,
				(max-width: 800px) 150px,
				250px"
		src="//cdna.4imprint.com/prod/250/404183.jpg" alt="Confetti Stadium Cup">
	<figcaption class="textCenter">Confetti Stadium Cup<sup>®</sup></figcaption>
</a>
					
				

Code

					
<a class="darkestLink" href="/product/114238/Confetti-Stadium-Cup-17-oz" title="View the Confetti Stadium Cup">
	<picture>
		<img class="responsiveImg" srcset="//cdna.4imprint.com/prod/250/404183.jpg 250w,
			//cdna.4imprint.com/prod/150/404183.jpg 150w,
			//cdna.4imprint.com/prod/300/404183.jpg 300w"
			sizes="(max-width: 400px) 250px,
				(max-width: 600px) 300px,
				(max-width: 800px) 150px,
				250px"
		src="//cdna.4imprint.com/prod/250/404183.jpg" alt="Confetti Stadium Cup"  loading="lazy">
	</picture>
	<figcaption class="textCenter">Confetti Stadium Cup<sup>®</sup></figcaption>
</a>
					
				

Code

					
<div class="text16 marginTop10">
	 <fieldset>
        		<legend class="textSemiBold roundCorners3 text16 textWhite bkgdDkRed padding5 marginBtm5">up to 15% off!</legend>
        		<p calss="text14 textSemiBold"><span class="visually-hidden">Original price </span&l\gt;normally as low as $33.95</p>
        		<p class="text14 textSemiBold textDkRed"><span class="visually-hidden">Today's price </span>now as low as $31.25</p>
    	</fieldset>
</div>
					
				

Code

					
<div class="c-sm-third-1 c-xs-full textCenter">
	<div class="borderMdGray padding20">
		<h3 class="textNormal text25 textBlue">Need it Fast?</h3>
		<p class="text16 marginBtm10">Put us to the test</p>
		<a class="text16" href="/tag/1/24-hour">View 24-hour Items</a>
	</div>
</div>
					
				

Code

					
<div class="tableContainer">
    <table id="productTable" class="adminTableStyled">
        <thead>
            <tr>
                <th data-filter="Vendor Name">Vendor</th>
                <th>Product Alias</th>
                <th>Product ID</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>   			
					
				

Code

					
<div id="copyTabs" class="tabs4i fullWidth borderMdGray">
	<div class="tabList displayFlex flexNoWrap flexSpaceBetween" role="tablist" aria-label="Tab Examples">
		<button id="tabOne" class="tabLink active" role="tab" data-content="tabPanelOne" aria-controls="tabPanelOne" aria-selected="true">
			<h2>First Tab Title</h2>
		</button>
		<button id="tabTwo" class="tabLink" tabindex="-1" role="tab" data-content="tabPanelTwo" aria-controls="tabPanelTwo" aria-selected="false">
			<h2>Second Tab Title</h2>
		</button>
	</div>
	<section id="tabPanelOne" role="tabpanel" class="tabContent bkgdWhite" aria-label="Tab Example One" aria-hidden="false">
		<p class="text16">First tab content</p>
	</section>
	<section id="tabPanelTwo" role="tabpanel" class="tabContent bkgdWhite hide" aria-label="Tab Example Two" aria-hidden="true">
		<p class="text16">Second tab content</p>
	</section>
</div>        			
					
				

Code

					
<div class="tooltipWrapper">
	<button class="tooltipTrigger alignLeft btnToHyp darkestLink padding10" aria-expanded="false" aria-describedby="colorToolTip">
		<svg height="25px" width="25px" focusable="false" role="img" aria-label="Product Color Tooltip"><title>Product Color Tooltip</title><use xlink:href="#svgIcon-tooltip"></use></svg>
	</button>
	<div role="tooltip" id="colorToolTip" aria-hidden="true">
		<p>Click one of the color choices from the list. Once you're done, scroll down to select the item quantity.</p>
	</div>
</div>        			
					
				

Code

					
<button class="videoLink show noLine pointer" type="button" data-productid="326" aria-expanded="false">
	<svg class="textOrange" height="40px" width="40px" role="img" aria-label="Watch a Video for Bic Clic Stic Pen"><title>Watch a Video for Bic Clic Stic Pen</title> <use xlink:href="#svgIcon-watchVideo"></use> </svg>
</button>       			
					
				

Code

					
<button type="button" id="" class="fileMenuBtn posAbsolute btnToHyp noLine padding10" aria-expanded="false">
	<svg class="show" height="20px" width="20px" focusable="false" role="img" aria-label=""><title></title><use xlink:href="#svgIcon-threeDotMenu"></use></svg>
</button>
<div class="fileMenu posAbsolute">
	<ul class="itemMenuLinks reset resetList textLeft padding5 borderMdGray bkgdWhite dropdownShadow">
		<li>
			<button type="button" id="" aria-pressed="false" class="textLeft noLine btnToHyp text16 darkestLink">Edit Name</button>
		</li>
		<li class="paddingTop5">
			<button type="button" id="" aria-pressed="false" class="textLeft noLine btnToHyp text16 darkestLink">Delete</button>
		</li>
	</ul>
	<svg class="menuTriangle posAbsolute textWhite rotate90" height="15px" width="15px" aria-hidden="true"> <use xlink:href="#svgIcon-arrowSolid"></use> </svg>
</div>