<p>Normal: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;</p>
<p><strong>Bold: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;</strong></p>
<p><em>Italic: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;</em></p>


      

      
<p class="serif">Normal: "Didot 24 A", "Didot 24 B", serif;</p>
<p class="serif"><strong>Bold: "Didot 24 A", "Didot 24 B", serif;</strong></p>
<p class="serif"><em>Italic: "Didot 24 A", "Didot 24 B", serif;</em></p>


      

      <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
      

      <h2 class="heading-serif">Stylized Shelf Header heading</h2>

      

      <h2 class="collection-name">
  
    Collection Name
  
</h2>
      

      <h2 class="heading-has-line">
  
    Heading Label
  
</h2>
      

      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      

      <p>The following is <strong>bold text.</strong></p>
<p>The following is <em>italicized text.</em></p>
      

      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt enim, iste doloremque atque ex quod reiciendis eaque asperiores repellendus minima corrupti sed cupiditate nobis, non laboriosam aliquid quos deserunt sequi!</p>
      

      <h1>Headline <small>Additional info</small></h1>
<p class="small">Need it fast? Send it in an <a href="#">E-Gift Card</a>.</p>
      

      <span class="strikethrough">$99.99</span>
      

      <p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-right-lg">Right aligned text on larger screens.</p>
      

      <p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
      

      <address>
  <strong>Stonebriar Centre</strong><br>
  2601 Preston Road<br>
  Suite 1082<br>
  Frisco, TX  75034<br>
  469-633-1080
</address>
      

      <div class="alert alert-success" role="alert">
  I am a generic action success message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Please note:</strong> We can not guarantee store inventory availability. Inventory can change quickly throughout the day. Call store prior to arriving to confirm availability. Our locate in store feature only displays items that are not on sale.
</div>
<div class="alert alert-warning" role="alert">
  This item is sold out in that size.
</div>
<div class="alert alert-danger" role="alert">
  We do not see any completed orders for your account at this time. Please call customer service at 1.888.855.4986 to learn more details.
</div>
      

      <span class="text-alert">Alert text</span>
      

      <div class="well">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt enim, iste doloremque atque ex quod reiciendis eaque asperiores repellendus minima corrupti sed cupiditate nobis, non laboriosam aliquid quos deserunt sequi!
</div>
      

      <div class="search-msg">
  0 results found for salad, showing results for solid
</div>
      

      <h3 class="product-group">
  
    Product Group
  
</h3>
      

      <h1 class="product-name">
  
    Chevron Jacquard Moto Jacket
  
</h1>
      

      <h3 class="product-style-id">Style: 23456789</h3>
      

      <div class="product-size-tools">
  <svg class="fit-icon">
    <use xlink:href="#fit-icon"></use>
  </svg>
  <span>Fit Predictor</span>
  <a href="#" data-toggle="modal" data-target="#modal-size-calculator">Calculate Your Size</a>
  <a href="#" data-toggle="modal" data-target="#modal-size">
    
      Our Size Chart
    
  </a>
</div>
      

      <div class="product-remove"><span>Remove</span></div>
      

      <p class="product-msg">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eveniet, assumenda eos atque! Possimus, natus, culpa.
</p>
      

      <p class="product-full-link">
  <a href="#">View full product details <i class="fa fa-angle-right"></i></a>
</p>
      

      <h3 class="facet-heading">Shop By</h3>
      

      <div class="facet-label">
  Color Name
</div>
      

      <div class="p">
  <a class="buy-more" href="#">
    <svg class="icon-plus"><use xlink:href="#icon-plus"></use></svg>Buy more at once
  </a>
</div>
      

      <a href="#" class="info-link">Details</a>
      

      <h2 class="detail-heading">Order Summary</h2>
      

      <p class="coupon-code">Use Promo Code: TK421</p>
      

      <hr>
      

      <hr class="hr-mobile">
      

      <ul>
  <li>Individual style. Clean, modern lines. The exclusive Black Label by Chico's&trade; collection.</li>
  <li>Concealed snap styling.</li>
  <li>Chest and hand pockets.
    <ul>
      <li>Chest pocket length: 12.5"</li>
      <li>Hand pocket length: 5"</li>
    </ul>
  </li>
  <li>Length: 23.5".</li>
  <li>80% cotton, 20% rayon.</li>
  <li>Machine wash. Imported.</li>
</ul>
      

      <ul class="list-unstyled">
  <li>Individual style. Clean, modern lines. The exclusive Black Label by Chico's&trade; collection.</li>
  <li>Concealed snap styling.</li>
  <li>Chest and hand pockets.</li>
  <li>Length: 23.5".</li>
  <li>80% cotton, 20% rayon.</li>
  <li>Machine wash. Imported.</li>
</ul>
      

      <ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Consequatur nihil consequuntur voluptas a quae.</li>
  <li>Soluta placeat praesentium adipisci sint nihil amet, similique eos.</li>
</ol>
      

      <dl>
  <dt>Lorem ipsum dolor sit amet</dt>
  <dd>
    Quo deserunt temporibus tempora sit officiis maxime eum nemo ducimus. Quasi accusamus, aliquid tenetur neque quibusdam magnam corporis doloribus fuga. Molestias, optio.
  </dd>
  <dt>Corporis omnis illo odio ullam nam accusamus</dt>
  <dd>
    Aut dolores hic ducimus blanditiis adipisci architecto inventore fugiat. Minima officia numquam nobis inventore veritatis nostrum, voluptatibus voluptas deserunt iure ea! Adipisci.
  </dd>
</dl>
      

      <dl class="dl-horizontal">
  <dt>Ship To Name:</dt>
  <dd>Brian MacDonald</dd>
  <dt>Ship To Address:</dt>
  <dd>
    123 Main St.<br>
    Naples, FL 34104<br>
    USA
  </dd>
  <dt>Shipping Method:</dt>
  <dd>Parcel Post</dd>
  <dt>Order Total:</dt>
  <dd>$307.00</dd>
</dl>
      

      <div class="row">
  <div class="col-md-4">
    <img class="img-responsive" src="http://placehold.it/200x250&text=Product" alt="">
  </div>
</div>
      

      
  <img class="img-responsive img-swap" src="/web_assets/imgs/temp/gray.png" alt="Product Name">




      

      <div class="product-img-wrap">
  

    
      <a href="#" class="hidden-xs" data-toggle="modal" data-target="#modal-gallery">
        <img id="product-img" class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%971250&w=1000&h=1250" alt="Product Name"
          srcset="
          https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%971250&w=480&h=600 480w,
          https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%971250&w=767&h=959 767w,
          https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%971250&w=1000&h=1250 1000w
        "
        sizes="
          (min-width: 768px) 60vw,
          100vw
        "
        >
        <span class="btn btn-sm hidden-sm hidden-xs"><svg class="icon-zoom icon-square-sm icon-left"><use xlink:href="#icon-zoom"></use></svg> View Full Screen</span>
      </a>
    

    

    <div id="carousel-pdp" class="carousel slide hidden-lg visible-xs" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-pdp" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-pdp" data-slide-to="1" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">


          
            <img id="product-img" class="img-responsive" src="/web_assets/imgs/temp/pdp/option2-md.jpg" alt="Product Name"
              srcset="
                /web_assets/imgs/temp/pdp/option2-sm.jpg 480w,
                /web_assets/imgs/temp/pdp/option2-md.jpg 767w
              "
              sizes="
                (min-width: 768px) 60vw,
                100vw
              "
            >
          



          
        </div>
        <div class="item">
          
            <img id="product-img" class="img-responsive" src="http://www.chicos.com/Product_Images/570155042_large.jpg?resize=767px:959px&output-quality=85" alt="Product Name"
              srcset="
                http://www.chicos.com/Product_Images/570155042_large.jpg?resize=480px:600px&output-quality=85 480w,
                http://www.chicos.com/Product_Images/570155042_large.jpg?resize=767px:959px&output-quality=85 767w
              "
              sizes="
                (min-width: 768px) 60vw,
                100vw
              "
            >
          
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-pdp" data-slide="prev" aria-label="previous">
        <svg class="icon-arrow-left" role="presentation">
          <use xlink:href="#icon-arrow-left"></use>
        </svg>
      </a>
      <a class="right carousel-control" href="#carousel-pdp" data-slide="next" aria-label="next">
        <svg class="icon-arrow-right" role="presentation">
          <use xlink:href="#icon-arrow-right"></use>
        </svg>
      </a>
    </div>


  
</div>


      

      <div class="form-group ">
  <label class="control-label " for="text-label">Text Label
    
      
    
  </label>
  <input type="text" class="form-control" id="text-label" placeholder="">
  
</div>
      

      <div class="form-group ">
  <label class="control-label " for="email-label">Email Label
    
      
    
  </label>
  <input type="email" class="form-control" id="email-label" placeholder="">
  
</div>
      

      <div class="form-group ">
  <label class="control-label " for="password-label">Password Label
    
      
    
  </label>
  <input type="password" class="form-control" id="password-label" placeholder="">
  
</div>
      

      <div class="form-group  ">
  
    <label class="control-label" for="select-label">Select Label
      
        
      
    </label>
  
  <select class="form-control selectpicker" id="select-label">
    <option value="">Option 1</option><option value="">Option 2</option>
  </select>
  
</div>
      

      <div class="radio">
  <label>
    <input type="radio" name="radio-options" id="radio-option-1" value="option-1" checked>
    Radio option 1
  </label>
</div>
      <div class="radio">
  <label>
    <input type="radio" name="radio-options" id="radio-option-1" value="option-2" >
    Radio option 2
  </label>
</div>
      <div class="radio">
  <label>
    <input type="radio" name="radio-options" id="radio-option-1" value="option-3" >
    Radio option 3
  </label>
</div>
      

      <div class="checkbox">
  <label>
    <input type="checkbox" value="check-1" checked>
    Checkbox option 1
  </label>
</div>
      <div class="checkbox">
  <label>
    <input type="checkbox" value="check-2" >
    Checkbox option 2
  </label>
</div>
      <div class="checkbox">
  <label>
    <input type="checkbox" value="check-3" >
    Checkbox option 3
  </label>
</div>
      

      <label class="radio-inline">
  <input type="radio" name="inline-radio-options" id="inline-radio-1" value="option-1" checked>
  1
</label>
      <label class="radio-inline">
  <input type="radio" name="inline-radio-options" id="inline-radio-2" value="option-2" >
  2
</label>
      <label class="radio-inline">
  <input type="radio" name="inline-radio-options" id="inline-radio-3" value="option-3" >
  3
</label> 
      

      <label class="checkbox-inline">
  <input type="checkbox" id="check-1" value="check-1" checked>
  1
</label>
      <label class="checkbox-inline">
  <input type="checkbox" id="check-2" value="check-2" >
  2
</label>
      <label class="checkbox-inline">
  <input type="checkbox" id="check-3" value="check-3" >
  3
</label>
      

      <div class="form-group">
  <label for="label">Label</label>
  <textarea id="label" class="form-control" rows="3"></textarea>
</div>
      

      <div class="form-group">
  
    <label for="phone1">Phone</label>
  
  <div class="form-inline form-phone">
    <input type="text" class="form-control number" id="phone1" maxlength="3"></input> - 
    <input type="text" class="form-control number" id="phone2" maxlength="3"></input> -
    <input type="text" class="form-control number" id="phone3" maxlength="4"></input>
  </div>
</div>
      

      <form>
  <div class="form-group has-error">
    <label class="control-label" for="input-error">Input with error</label>
    <input type="text" class="form-control" id="input-error">
  </div>
  <div class="has-error">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="checkbox-error" value="checkbox-option-1">
        Checkbox with error
      </label>
    </div>
  </div>
  <div class="has-error">
    <div class="radio">
      <label>
        <input type="radio" id="radio-error" value="radio-option-1">
        Radio with error
      </label>
    </div>
  </div>
</form>
      

      <p class="help-block">Helpful text</p>
      

      
  <button type="submit" class="btn btn-default" >Default</button>

      
  <button type="submit" class="btn btn-primary" >Primary</button>

      
  <button type="submit" class="btn btn-link" >Link</button>

      
  <button type="submit" class="btn btn-default" disabled>Disabled</button>

      

      
  <button type="submit" class="btn btn-default btn-lg" >Large</button>

      
  <button type="submit" class="btn btn-default" >Default</button>

      
  <button type="submit" class="btn btn-default btn-sm" >Small</button>

      
  <button type="submit" class="btn btn-default btn-xs" >Extra Small</button>

      
  <button type="submit" class="btn btn-default btn-responsive" >Responsive</button>

      

      
  <button type="submit" class="btn btn-default btn-lg btn-block" >Block Level Button</button>

      

        
  <button type="submit" class="btn btn-buy btn-lg btn-block" >Add to Bag</button>

      

        <div class="col-sm-6 product-controls-secondary">
          <span class="btn btn-wrapped" data-toggle="modal" data-target="#modal-add-wishlist">Add to Wish List</span>
<span class="btn btn-wrapped" onclick="openLocator();">Find in Store</span>
        </div>
      

      <div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Lorem Ipsum</th>
        <th>Dolor Site Amet</th>
        <th>Consectetur Elit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Praesentium</td>
        <td>Tempora</td>
        <td>Ratione accusamus minus</td>
      </tr>
      <tr>
        <td>Accusantium</td>
        <td>Adipisicing</td>
        <td>Laborum maxime suscipit fugit</td>
      </tr>
      <tr>
        <td>Dolor</td>
        <td>Nihil</td>
        <td>Voluptates at modi, veritatis</td>
      </tr>
    </tbody>
  </table>
</div>