Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Components

PLP Fitguide Generator

Product info


Output for copying

Table Row for Size Chart Docs


<tr>
	<td>{{all.cat}}</td>
	<td>{{all.num}}</td>
	<td>{{all.prod}}</td>
	<td><a href="/views/ssi/{{all.dialogurl}}" data-dialog-link data-dialog-tabnumber="0" data-dialog-addclass="fit_dialog">{{all.dialogurl}}</a></td>
</tr>

PDP Fitguide Mod


	<div class="howitfits howitfits-pdp">
			<div class="howitfits-product">
				<h3 class="howitfits-pdp-hed">How it Fits: <span class="howitfits-product-name">{{all.cat}}</span></h3>

				<p>{{all.desc}}</p>

				<p>See how it will fit on you<br>
					<a href="/views/ssi/{{all.dialogurl}}" data-dialog-link data-dialog-tabnumber="0" data-dialog-addclass="fit_dialog" class="icon-arrow-forward">Fit Guide: <span class="howitfits-product-name">{{all.cat}}</span></a>
				</p>
			</div>

			<a href="/views/ssi/{{all.dialogurl}}" data-dialog-link data-dialog-tabnumber="0" data-dialog-addclass="fit_dialog">
				<span class="a11y-only">Open Fit Guide: <span class="howitfits-product-name">{{all.cat}}</span></span>
				<span aria-role="presentation" aria-hidden="true">
					<!-- Model cards -->
					<div class="howitfits-cards">
						<div class="howitfits-card">
								<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_med.jpg 520w" alt="">
								<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modela.toLowerCase()}}.html" -->
						</div>
						<div class="howitfits-card">
								<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_med.jpg 520w" alt="">
								<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modelb.toLowerCase()}}.html" -->
						</div>
						<div class="howitfits-card">
								<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_med.jpg 520w" alt="">
								<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modelc.toLowerCase()}}.html" -->
						</div>
					</div>
					<!-- /model cards -->
				</span>
			</a>
		</div>
	

Full Fitguide Overlay


<h2 class="dialog-title" id="top">
			<span>Fit Guide</span>
			<a href="#" data-close="" role="button"><span class="a11y-only">Close dialog</span><span class="icon-close-white"></span></a>
		</h2>

		<h3 class="dialog-subtitle">{{all.cat}}</h3>

		<a href="{{all.caturl}}" target="_blank" rel="noopener" class="dialog-categorylink">Shop all {{all.broadercat}} <i class="icon icon-arrow-forward"></i></a>

		<div class="tabs dialog-tabs">
			<div class="collapsible collapsible-collapsed" data-collapsible-set="dialog-tabs">
				<h4 class="collapsible-header">How It Fits</h4>
				<div class="collapsible-content">
					<div class="sizechart-intro-2col">
						<div class="intro">
							<p>{{all.desc}}</p>
							<p class="intro-context">Models are wearing the <a href="{{all.produrl}}" target="_blank">{{all.prod}}</a></p>
						</div>

						<!--{{pound}}include virtual="/views/ssi/_fitguide-dialog-static-fit-toggles.html" -->

						<div class="howitfits howitfits-long">

							<div class="howitfits-cards">
								<div class="howitfits-card">
									<a href="#{{all.modela}}" class="howitfits-card-link" data-dialog-inneranchor>
										<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_f_med.jpg 520w" alt="">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modela}}.html" -->
										<span class="howitfits-card-size">Size: {{all.modelasizeb}}</span>
									</a>
								</div>
								<div class="howitfits-card">
									<a href="#{{all.modelb}}" class="howitfits-card-link" data-dialog-inneranchor>
										<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_f_med.jpg 520w" alt="">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modelb}}.html" -->
										<span class="howitfits-card-size">Size: {{all.modelbsizeb}}</span>
									</a>
								</div>
								<div class="howitfits-card">
									<a href="#{{all.modelc}}" class="howitfits-card-link" data-dialog-inneranchor>
										<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_f_med.jpg 520w" alt="">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-card-{{all.modelc}}.html" -->
										<span class="howitfits-card-size">Size: {{all.modelcsizeb}}</span>
									</a>
								</div>
							</div>

							<div class="howitfits-model" id="{{all.modela}}">
								<div class="howitfits-grid">
									<div class="howitfits-info">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-info-{{all.modela}}.html" -->
										<!-- Fit note goes here, if populated -->
									</div>

									<div class="howitfits-styles">

										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Front</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_F_{{all.modelasizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizec}}</span>
											</div>
										</div><!-- /style -->

										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Back</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modela}}_B_{{all.modelasizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelasizec}}</span>
											</div>
										</div><!-- /style -->

									</div><!-- /styles container -->

									<div class="howitfits-toplink">
										<a href="#top" data-dialog-inneranchor class="backtotop icon-topside" title="Back to top">Back to top</a>
									</div><!-- /toplink -->

								</div><!-- /grid -->
							</div><!-- /model -->


							<div class="howitfits-model" id="{{all.modelb}}">
								<div class="howitfits-grid">
									<div class="howitfits-info">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-info-{{all.modelb}}.html" -->
										<!-- Fit note goes here, if populated -->
									</div>

									<div class="howitfits-styles">

										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Front</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_F_{{all.modelbsizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizec}}</span>
											</div>
										</div><!-- /style -->



										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Back</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelb}}_B_{{all.modelbsizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelbsizec}}</span>
											</div>
										</div><!-- /style -->

									</div><!-- /styles container -->

									<div class="howitfits-toplink">
										<a href="#top" data-dialog-inneranchor class="backtotop icon-topside" title="Back to top">Back to top</a>
									</div><!-- /toplink -->

								</div><!-- /grid -->
							</div><!-- /model -->

							<div class="howitfits-model" id="{{all.modelc}}">
								<div class="howitfits-grid">
									<div class="howitfits-info">
										<!--{{pound}}include virtual="/views/ssi/_fitguide-model-info-{{all.modelc}}.html" -->
										<!-- Fit note goes here, if populated -->
									</div>

									<div class="howitfits-styles">

										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Front</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_F_{{all.modelcsizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizec}}</span>
											</div>
										</div><!-- /style -->

										<div class="howitfits-style">
											<h4 class="howitfits-style-subhed">Back</h4>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizea}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizea}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizea}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizea}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizeb}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizeb}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizeb}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizeb}}</span>
											</div>
											<div class="howitfits-img">
												<img data-aspectratio="200/308" src="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizec}}_{{forc}}_sml.jpg" sizes="33vw" srcset="/img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizec}}_{{forc}}_sml.jpg 200w, /img/fitguide/women/{{all.num}}_{{all.modelc}}_B_{{all.modelcsizec}}_{{forc}}_med.jpg 520w" alt="">
												<span class="howitfits-badge">{{all.modelcsizec}}</span>
											</div>
										</div><!-- /style -->

									</div><!-- /styles container -->

									<div class="howitfits-toplink">
										<a href="#top" data-dialog-inneranchor class="backtotop icon-topside" title="Back to top">Back to top</a>
									</div><!-- /toplink -->

								</div><!-- /grid -->
							</div><!-- /model -->
						</div>



				</div>
			</div><!-- /tab 1 -->

			<!--{{pound}}include virtual="/views/ssi/_fitguide-dialog-tab-size-charts-women.html" -->
			<!--{{pound}}include virtual="/views/ssi/_fitguide-dialog-tab-measurement-tips-womens.html" -->
		</div><!-- /tabs -->
	

Model card ssis

{{all.modelafullname}}


		<span class="howitfits-card-name">{{all.modelafullname}}</span>
		<span class="howitfits-card-stats"><span data-convert="length">{{all.modelaheight}}</span> <span>Size: {{all.modelasizeb}}</span></span>
	

{{all.modelbfullname}}


		<span class="howitfits-card-name">{{all.modelbfullname}}</span>
		<span class="howitfits-card-stats"><span data-convert="length">{{all.modelbheight}}</span> <span>Size: {{all.modelbsizeb}}</span></span>
	

{{all.modelcfullname}}


		<span class="howitfits-card-name">{{all.modelcfullname}}</span>
		<span class="howitfits-card-stats"><span data-convert="length">{{all.modelcheight}}</span> <span>Size: {{all.modelcsizeb}}</span></span>
	

Model info ssis

{{all.modelafullname}}


	<h3 class="howitfits-subhed">{{all.modelafullname}}</h3>
	<ul>
		<li><span class="a11y-only">Height: </span><span data-convert="length">{{all.modelaheight}}</span></li>
		<li><span>Size: </span><span>{{all.modelasizeb}}</span></li>
		<li><span data-convert="length">{{all.modelabust}}</span> Bust</li>
		<li><span data-convert="length">{{all.modelawaist}}</span> Waist</li>
		<li><span data-convert="length">{{all.modelahip}}</span> Hip</li>
		<li><span>{{all.modelainseam}}</span> Inseam</li>
		<li><span>{{all.modelashoe}} US</span> Shoe</li>
	</ul>
	

{{all.modelbfullname}}


	<h3 class="howitfits-subhed">{{all.modelbfullname}}</h3>
	<ul>
		<li><span class="a11y-only">Height: </span><span data-convert="length">{{all.modelbheight}}</span></li>
		<li><span>Size: </span><span>{{all.modelbsizeb}}</span></li>
		<li><span data-convert="length">{{all.modelbbust}}</span> Bust</li>
		<li><span data-convert="length">{{all.modelbwaist}}</span> Waist</li>
		<li><span data-convert="length">{{all.modelbhip}}</span> Hip</li>
		<li><span>{{all.modelbinseam}}</span> Inseam</li>
		<li><span>{{all.modelbshoe}} US</span> Shoe</li>
	</ul>
	

{{all.modelcfullname}}


	<h3 class="howitfits-subhed">{{all.modelcfullname}}</h3>
	<ul>
		<li><span class="a11y-only">Height: </span><span data-convert="length">{{all.modelcheight}}</span></li>
		<li><span>Size: </span><span>{{all.modelcsizeb}}</span></li>
		<li><span data-convert="length">{{all.modelcbust}}</span> Bust</li>
		<li><span data-convert="length">{{all.modelcwaist}}</span> Waist</li>
		<li><span data-convert="length">{{all.modelchip}}</span> Hip</li>
		<li><span>{{all.modelcinseam}}</span> Inseam</li>
		<li><span>{{all.modelcshoe}} US</span> Shoe</li>
	</ul>