Individual sale items inside the digital circular.
The basic circular item is the basis for our digital circular content.
Tower format digital circular item with a 1k 16:9 image.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
<article class="shadow circular-item circular-item-standard card card-standard col" id="circular-item-1">
<img src="/assets/images/circular-items/sweet_corn_1k.jpg" alt="Picture of Homegrown Amaize! Sweet Corn" class="circular-item-image card-img-top img-fluid">
<div class="circular-item-body card-body">
<p class="circular-item-heading">LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!</p>
<h3 class="circular-item-title">Homegrown Amaize! Sweet Corn</h3>
<p class="circular-item-description">White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch</p>
<p class="price price-big-dollars">
<span class="price-prefix">12 for</span>
<span class="price-dollar-sign">$</span>
<span class="price-dollars">4</span>
<span class="price-cents">99</span>
<span class="price-suffix">lb.</span>
<img class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
</p>
<p class="circular-item-details">Available for a Limited Time</p>
<p class="circular-item-sale-dates text-danger">Starts 4/10/2050</p>
<p class="circular-item-recipe">
<span class="circular-item-recipe-label">Recipe:</span>
<a href="http://www.topsmarkets.com/Recipes/Detail/7417/Amaize_Sweet_Corn_Summer_Spreads/" class="circular-item-recipe-title-link">
Amaize Sweet Corn Summer Spreads
</a>
</p>
</div>
<div class="circular-item-footer card-footer">
<div class="shopping-list-item">
<form action="/shopping_list/add/circular_item/[self->id]/qty/" class="shopping-list-item-form">
<div class="row justify-content-end">
<div class="shopping-list-item-qty-col col-12 col-sm">
<div class="shopping-list-item-qty-group input-group ">
<span class="shopping-list-item-qty-label input-group-text" id="shopping-list-qty-label-1">Qty</span>
<input type="text" name="Qty" value="12" maxlength="2" class="shopping-list-item-qty form-control" placeholder="01" id="shopping-list-item-qty-1" aria-label="Username" aria-describedby="shopping-list-qty-label-1">
</div>
</div>
<div class="shopping-list-item-btn-col col-12 col-sm-auto">
<button type="submit" class="shopping-list-item-btn btn btn-primary btn-block btn-sm-inline-block">
<i class="fak fa-add-circle"></i>
<span class="d-inline d-sm-none">Add to</span>
<span class="d-none d-sm-inline"><span class="sr-only">Add to </span>Shopping</span>
List
</button>
</div>
</div>
</form>
</div>
</div>
</article>The optional col class allows circular items align nicely in a flex box grid.
Circular items which rest inside a row class and contain a col class will
nicely divide up the available space in a row to provide a nice group presentation.
If a circular item is going to stand alone on a page or section of a page, the col
class is unnecessary.
Standard circular item with the price pinned to the bottom.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
<article class="shadow circular-item circular-item-standard circular-item-price-bottom card card-standard col" id="circular-item-1">
<img src="/assets/images/circular-items/sweet_corn_1k.jpg" alt="Picture of Homegrown Amaize! Sweet Corn" class="circular-item-image card-img-top img-fluid">
<div class="circular-item-body card-body">
<p class="circular-item-heading">LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!</p>
<h3 class="circular-item-title">Homegrown Amaize! Sweet Corn</h3>
<p class="circular-item-description">White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch</p>
<p class="price price-big-dollars">
<span class="price-prefix">12 for</span>
<span class="price-dollar-sign">$</span>
<span class="price-dollars">4</span>
<span class="price-cents">99</span>
<span class="price-suffix">lb.</span>
<img class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
</p>
<p class="circular-item-details">Available for a Limited Time</p>
<p class="circular-item-sale-dates text-danger">Starts 4/10/2050</p>
<p class="circular-item-recipe">
<span class="circular-item-recipe-label">Recipe:</span>
<a href="http://www.topsmarkets.com/Recipes/Detail/7417/Amaize_Sweet_Corn_Summer_Spreads/" class="circular-item-recipe-title-link">
Amaize Sweet Corn Summer Spreads
</a>
</p>
</div>
<div class="circular-item-footer card-footer">
<div class="shopping-list-item">
<form action="/shopping_list/add/circular_item/[self->id]/qty/" class="shopping-list-item-form">
<div class="row justify-content-end">
<div class="shopping-list-item-qty-col col-12 col-sm">
<div class="shopping-list-item-qty-group input-group ">
<span class="shopping-list-item-qty-label input-group-text" id="shopping-list-qty-label-1">Qty</span>
<input type="text" name="Qty" value="12" maxlength="2" class="shopping-list-item-qty form-control" placeholder="01" id="shopping-list-item-qty-1" aria-label="Username" aria-describedby="shopping-list-qty-label-1">
</div>
</div>
<div class="shopping-list-item-btn-col col-12 col-sm-auto">
<button type="submit" class="shopping-list-item-btn btn btn-primary btn-block btn-sm-inline-block">
<i class="fak fa-add-circle"></i>
<span class="d-inline d-sm-none">Add to</span>
<span class="d-none d-sm-inline"><span class="sr-only">Add to </span>Shopping</span>
List
</button>
</div>
</div>
</form>
</div>
</div>
</article>Standard circular item with the price pinned to the top.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
<article class="shadow circular-item circular-item-standard circular-item-price-top card card-standard col" id="circular-item-1">
<img src="/assets/images/circular-items/sweet_corn_1k.jpg" alt="Picture of Homegrown Amaize! Sweet Corn" class="circular-item-image card-img-top img-fluid">
<div class="circular-item-body card-body">
<p class="circular-item-heading">LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!</p>
<h3 class="circular-item-title">Homegrown Amaize! Sweet Corn</h3>
<p class="circular-item-description">White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch</p>
<p class="price price-big-dollars">
<span class="price-prefix">12 for</span>
<span class="price-dollar-sign">$</span>
<span class="price-dollars">4</span>
<span class="price-cents">99</span>
<span class="price-suffix">lb.</span>
<img class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
</p>
<p class="circular-item-details">Available for a Limited Time</p>
<p class="circular-item-sale-dates text-danger">Starts 4/10/2050</p>
<p class="circular-item-recipe">
<span class="circular-item-recipe-label">Recipe:</span>
<a href="http://www.topsmarkets.com/Recipes/Detail/7417/Amaize_Sweet_Corn_Summer_Spreads/" class="circular-item-recipe-title-link">
Amaize Sweet Corn Summer Spreads
</a>
</p>
</div>
<div class="circular-item-footer card-footer">
<div class="shopping-list-item">
<form action="/shopping_list/add/circular_item/[self->id]/qty/" class="shopping-list-item-form">
<div class="row justify-content-end">
<div class="shopping-list-item-qty-col col-12 col-sm">
<div class="shopping-list-item-qty-group input-group ">
<span class="shopping-list-item-qty-label input-group-text" id="shopping-list-qty-label-1">Qty</span>
<input type="text" name="Qty" value="12" maxlength="2" class="shopping-list-item-qty form-control" placeholder="01" id="shopping-list-item-qty-1" aria-label="Username" aria-describedby="shopping-list-qty-label-1">
</div>
</div>
<div class="shopping-list-item-btn-col col-12 col-sm-auto">
<button type="submit" class="shopping-list-item-btn btn btn-primary btn-block btn-sm-inline-block">
<i class="fak fa-add-circle"></i>
<span class="d-inline d-sm-none">Add to</span>
<span class="d-none d-sm-inline"><span class="sr-only">Add to </span>Shopping</span>
List
</button>
</div>
</div>
</form>
</div>
</div>
</article>This layout is achieved by giving the circular items a col class within the context
of a row.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
Demonstrates the alignment of prices on the bottom of circular items in a group.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
12 for
$
4
99
lb.
30 oz.
12 for
$
4
99
lb.
24 oz.
12 for
$
4
99
lb.
5.25-6 oz., selected varieties
12 for
$
4
99
lb.
20 oz.
Demonstrates the alignment of prices on the bottom of circular items in a group.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
12 for
$
4
99
lb.
30 oz.
12 for
$
4
99
lb.
24 oz.
12 for
$
4
99
lb.
5.25-6 oz., selected varieties
12 for
$
4
99
lb.
20 oz.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
Enter before 10/11/2020! Entry form, rules, and other details in the link below.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
