Product Page
Product page template showing product details, associated products, and product reviews.
<header class="hro hro-mini text-bg-accent1">
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
<!-- [Navigation Area] -->
<nav class="kb-nav navbar kb-navbar-xl nav-fixed" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-fluid">
<ul class="navbar-nav navbar-nav-user justify-content-split">
<li class="nav-item">
<a href="" class="nav-link">Special Promotion CTA Copy</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-solid fa-cart-shopping" aria-hidden="true"></span><span class="visually-hidden">Cart</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">Shop Now</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Featured</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Merch</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About Herr's</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Recipes</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">Visit Us</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
</div>
<div class="bg-layer"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Shop Now</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Featured</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Merch</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">About Herr's</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Recipes</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Visit Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
</header>
<main id="main-content" tabindex="0">
<!-- Product Information -->
<section class="sec-spacing-bottom-lg sec-spacing-top bg-accent1">
<div class="container-xxl">
<div class="row gy-3">
<div class="col-12">
<a href="#" class="h5 link-light text-uppercase">Back to Products</a>
</div>
<div class="col-12">
<div class="text-bg-light p-5 rounded-4">
<div class="row gy-4">
<!-- Product Photos -->
<div class="col-lg-6">
<div class="sticky-top sticky-prod-img">
<!-- Product Image -->
<div id="productCarousel" class="glide glide__products">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<" aria-label="Previous Slide">
<span class="fa-solid fa-chevron-left" aria-hidden="true"></span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">" aria-label="Next Slide">
<span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</button>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
<button class="glide__bullet" data-glide-dir="=1">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
<button class="glide__bullet" data-glide-dir="=2">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
<button class="glide__bullet" data-glide-dir="=3">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
</div>
</div>
</div>
</div>
<!-- Product Options -->
<div class="col-lg-6">
<h1 class="h2">Crisp'N Tasty Potato Chips</h1>
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 fw-bold mb-3">
<div class="d-flex gap-2 align-items-center">
<span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
<span>108 Reviews</span>
</div>
<a href="#">See All Reviews</a>
</div>
<p class="product-price">$31.50</p>
<div class="d-flex flex-column flex-xl-row gap-3">
<fieldset>
<legend>Quantity</legend>
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center" value="1" aria-label="Product Quantity">
<button class="btn btn-sm btn-link" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<div class="ms-xl-auto">
<div class="mb-5 d-flex flex-wrap gap-3">
<button class="btn btn-cta">Add to Cart</button>
<button class="btn btn-cta btn-shop-pay">
<span>Buy with</span>
<img class="d-block" src="/assets/img/shop-pay-logo.svg" alt="Shop Pay">
</button>
</div>
<a href="#" class="d-block h4 mb-0 text-lg-center">More Payment Options</a>
</div>
</div>
<fieldset class="radio-toggle-group">
<legend>Size</legend>
<div class="toggle-group">
<div>
<input type="radio" class="btn-check" name="size" id="prodSize0" value="42_1oz" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-dark" for="prodSize0">(42) 1 Oz.</label>
</div>
<div>
<input type="radio" class="btn-check" name="size" id="prodSize1" value="42_1oz" autocomplete="off">
<label class="btn btn-sm btn-outline-dark" for="prodSize1">(84) 1 Oz.</label>
</div>
<div>
<input type="radio" class="btn-check" name="size" id="prodSize2" value="24_275oz" autocomplete="off">
<label class="btn btn-sm btn-outline-dark" for="prodSize2">(24) 2.75 Oz.</label>
</div>
<div>
<input type="radio" class="btn-check" name="size" id="prodSize3" value="12_8oz" autocomplete="off">
<label class="btn btn-sm btn-outline-dark" for="prodSize3">(12) 8 Oz.</label>
</div>
<div>
<input type="radio" class="btn-check" name="size" id="prodSize4" value="6_8oz" autocomplete="off">
<label class="btn btn-sm btn-outline-dark" for="prodSize4">(6) 8 Oz.</label>
</div>
</div>
</fieldset>
<div class="accordion mb-3" id="productInfo">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#productInfo0" aria-expanded="true" aria-controls="productInfo0">
Description
</button>
</h2>
<div id="productInfo0" class="accordion-collapse collapse show" data-bs-parent="#productInfo">
<div class="accordion-body">
<p>The name speaks for itself! Every bag of Herr's Crisp and Tasty Potato Chips is a celebration of what Herr's does best. We start with premium potatoes, crafted into golden, crispy chips. Then, we season them to perfection so you can enjoy a tantalizing snack experience every time. As a family-owned company since 1946, behind every bag is our commitment to bringing you the finest ingredients. Herr's potato chips make a delicious gluten free snack food right out of the bag. Pack some for picnics or school lunches. Serve some as a tasty sidekick to hot dogs, beef burgers, and more. Break out a bag (or two) for a backyard BBQ or tailgating party. Reach for Herr's Crisp and Tasty Potato Chips as a way to flavor up life's celebrations, big and small.</p>
<hr>
<ul>
<li>Crispy potato chips that uphold the Herr's tradition of crafting flavorful, high-quality chips</li>
<li>Crunchy, perfectly seasoned chips</li>
<li>Gluten free; 150 calories per 1oz serving; Kosher Pareve</li>
<li>A family favorite snack food both kids and adults love; Perfect for a backyard barbecue, party time, TV or movie watching, and more</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#productInfo1" aria-expanded="false" aria-controls="productInfo1">
Nutrition Facts
</button>
</h2>
<div id="productInfo1" class="accordion-collapse collapse" data-bs-parent="#productInfo">
<div class="accordion-body">
<img style="max-width: 20rem;" class="ing-fluid" src="/assets/img/2.75-oz.-CrispNTasty-Chips_NutInfo_e4884920-817f-4f01-914c-f67aa60c2a18_2048x.webp" alt="">
</div>
</div>
</div>
</div>
<div class="kb-tabs-x mb-3">
<ul class="nav nav-" id="" role="tablist">
</ul>
<div class="tab-content" id="Content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Associated Products -->
<section class="lst-grid-sec sec-spacing bg-body-secondary">
<div class="container-xxl">
<div class="row">
<div class="col-12 sec-heading">
<h2>
You May Also Like
</h2>
</div>
<div class="col-12">
<div class="lst-grid row gy-3 gx-3 row-cols-1 row-cols-md-2 row-cols-xl-3">
<!-- BEGIN: Column Loop -->
<div class="col">
<div class="card dyn-crd-pdt">
<div class="card-badges">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Ripple Potato Chips"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">Ripple Potato Chips</p>
<span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
<a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
</div>
</div>
</div>
<div class="col">
<div class="card dyn-crd-pdt">
<div class="card-badges">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Barbecue Potato Chips"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">Barbecue Potato Chips</p>
<span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
<a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
</div>
</div>
</div>
<div class="col">
<div class="card dyn-crd-pdt">
<div class="card-badges">
<img src="../../../../assets/img/card-badge-ltf.svg" alt="Limited time flavor" class="img-fluid">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Sour Cream & Onion"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">Sour Cream & Onion</p>
<span class="star-rating" role='img' aria-label="Rated 3 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
<a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
</div>
</div>
</div>
<!-- END: Column Loop -->
</div>
</div>
</div>
</div>
</section>
<!-- Product Reviews -->
<section class="sec-spacing-top-lg sec-spacing-bottom">
<div class="container-xxl">
<div class="row gy-3">
<div class="col-12">
<h2>Product Reviews</h2>
<!-- Reviews Controls -->
<div class="d-flex flex-column flex-md-row align-items-md-start gap-2">
<input type="search" class="form-control w-md-35 w-lg-50" id="SearchcfSearchReviews" placeholder="Search Reviews" aria-label="Search Reviews">
<fieldset class="radio-toggle-group d-flex gap-2 ms-md-auto">
<legend>Sort By</legend>
<div class="toggle-group">
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort0" value="rating" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-primary" for="reviewSort0">Rating</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort1" value="age" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort1">Age</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort2" value="gender" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort2">Gender</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort3" value="locale" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort3">Locale</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Review Ratings -->
<div class="row mb-4">
<div class="col-sm-5 col-md-6 order-sm-last text-sm-end">
<p class="h5 mb-0">Overall Rating</p>
<p class="h1 mb-0 lh-1">4.3</p>
<p><span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span></p>
</div>
<div class="col-sm-7 col-md-6">
<ul class="list-unstyled">
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>5 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="85 percent of reviews have 5 stars" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 85%"></div>
</div>
<span>100</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>4 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="6 percent of reviews have 4 stars" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 6%"></div>
</div>
<span>6</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>3 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="2 percent of reviews have 3 stars" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 2%"></div>
</div>
<span>2</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>2 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="0 percent of reviews have 2 stars" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<span>0</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>1 Star</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="0 percent of reviews have 1 star" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<span>0</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row g-2">
<div class="col-md-6">
<p class="h6">108 Reviews</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="h6">Write a Review <span class="fa-solid fa-pen-to-square" aria-hidden="true"></span>
</a>
</div>
</div>
<!-- Reviews -->
<div class="row row-flex-cols row-cols-1 row-cols-md-2 gy-4 mb-4">
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Crispy and yummy!</p>
<p>These Crisp 'n Tasty potato chips are crispy and tasty. I like original flavor in my chips and I enjoyed this one very much. I did not share with anyone, I keep it to myself. The chips had good size, big. The quality and taste are all good too, light, crispy and tasty.</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Delicious!</p>
<p>Herr's Crisp N Tasty Potato Chips are an agreed upon favorite in our home. They're crisp, full of flavor and delicious. They're perfect to snack on any time we need a salty snack fix, and never disappoint.</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Perfectly Crispy!</p>
<p>These potato chips taste great and have the perfect amount of crunch to them. They have a substantial thickness to them so they do not break easily and work well with a dip. Additionally, the chips are not overly salty - they taste as they should and are not overpowered...</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Thin and crispy</p>
<p>I recently tried Herr's crisp and tasty potato chips for the first time. They were thin and crisp. I don't think that they were greasy or overly salty. They paired great with veggie burgers on the grill. I would definitely eat them again!</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Review Pagination -->
<div class="row">
<div class="col">
<nav aria-label="Review">
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" ><span class="fa-solid fa-chevron-left" aria-hidden="true"></span><span class="visually-hidden">Previous</span>
</a></li>
<li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#"><span class="fa-solid fa-chevron-right" aria-hidden="true"></span><span class="visually-hidden">Next</span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
</main>
<footer class="fgr sec-spacing-top herrs-footer">
<div class="fgr-section">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-3">
<!-- BEGIN: Footer Content -->
<img class="footer-logo" src="../../../../assets/img/herrs.png" alt="Herr's">
<p>271 Old Baltimore Pike <br>
Nottingham, PA 19362-9788</p>
<p>(610) 932-6400</p>
<ul class="list-social">
<li><a href="#"><span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Instagram</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-tiktok" aria-hidden="true"></span><span class="visually-hidden">Tiktok</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">x-twitter</span>
</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Our Company</p>
<ul class="link-list">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Values</a></li>
<li><a href="#">Leadership Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Contact Us</p>
<ul class="link-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sales & Distribution</a></li>
<li><a href="#">Media Outreach</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Resources</p>
<ul class="link-list">
<li><a href="#">Employees</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Business Review</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-wave">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-secondary-links">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<ul class="link-list-horiz">
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">California Privacy Notice</a></li>
<li><a href="#">Notice of Financial Incentive</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section subfooter">
<div class="container-xxl">
<div class="row justify-content-between align-items-center">
<div class="col-md-12 col-xl-auto text-white">
<!-- BEGIN: Footer Content -->
©Herr Foods Inc.
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-auto">
<!-- BEGIN: Footer Content -->
Handcrafted by Flylight Media
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
</footer>