GetGo Components

Billboards

Billboard Buttons

Primary Primary Secondary Secondary No Border White Button 
<a href="#0" class="btn btn-primary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">Primary</a>

<a href="#0" class="btn btn-primary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button"><i class="fal fa-print"></i>Primary</a>

<a href="#0" class="btn btn-secondary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">Secondary</a>

<a href="#0" class="btn btn-secondary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button"><i class="fal fa-print"></i>Secondary</a>

<a href="#0" class="btn btn-secondary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">No Border</a>

<a href="#0" class="btn btn-white" data-content="click-billboard-btn" aria-label="Giant Eagle Button">White Button</a>

<a class="icon icon-Pill-Arrow" style="color:#C8102E!important;font-size: 26px;
    line-height: 50px;"></a>

Full Width Left Image

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<!--Start billboard Image Left section-->
<section class="billboard full-width-left-img">
	<!--These classes make dynamic -->

	<div class="container">
		<a href="#" data-content="click-billboard">
			<div tabindex="0" class="thick-focus" style="background-color:#000000!important;">
				<div class="row">
					<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12 mobile-img">
						<!--These classes make dynamic -->
						<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
					</div>
					<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 mobile-copy billboard-copy">
						<!--These classes make dynamic -->
						<div class="copy">
							<div class="outer">
								<div class="middle">
									<div class="inner">
										<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
										<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
										<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</a>
	</div>

</section>
<!--End billboard Image Left section-->

Full Width Right Image Button

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

Learn More GE 
<!--Start billboard Image right section-->
<section class="billboard full-width-right-img">
	<!--These classes make dynamic -->
	<!--<a href="#" data-content="click-billboard">-->
	<div class="container">
		<div tabindex="0" class="thick-focus" style="background-color:#C8102E!important;">
			<div class="row">
				<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12 mobile-img col-lg-push-4 col-md-push-4 col-sm-push-6">
					<!--These classes make dynamic -->
					<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 mobile-btn-copy billboard-copy col-lg-pull-8 col-md-pull-8 col-sm-pull-6">
					<!--These classes make dynamic -->
					<div class="copy">
						<div class="outer">
							<div class="middle">
								<div class="inner">
									<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
									<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>

									<!--This button is interchangable and needs to be configurable in CMS-->
									<div class="mobile-center">
										<a tabindex="0" href="#0" class="btn button-white button-medium" data-content="click-billboard-btn" aria-label="Giant Eagle Billboard Button">Learn More GE</a>
									</div>
									<!--This button is interchangable and needs to be configurable in CMS-->


								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--</a>-->
</section>
<!--End billboard Image right section-->

Full Width Right Image

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<!--Start billboard Image right section-->
<section class="billboard full-width-right-img">
	<!--These classes make dynamic -->
	<a href="#" data-content="click-billboard">
		<div class="container">
			<div class="thick-focus" tabindex="0" style="background-color:#000000!important;">
				<div class="row">
					<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12 mobile-img col-lg-push-4 col-md-push-4 col-sm-push-6">
						<!--These classes make dynamic -->
						<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
					</div>
					<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 mobile-copy billboard-copy col-lg-pull-8 col-md-pull-8 col-sm-pull-6">
						<!--These classes make dynamic -->
						<div class="copy">
							<div class="outer">
								<div class="middle">
									<div class="inner">
										<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
										<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
										<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a>
</section>
<!--End billboard Image right section-->

Image Sizes

1 Column = 710X400
2 columns = 730x600
3 columns = 1520x720

1 Column
710 x 400
-This big so it fits on iPad view

2 Column
710 x 400
-Add focus in middle as it will only show middle on desktop but whole image on mobile.

FULL WIDTH
1526x726(ideal size)
763x363(smallest)
-Focus in middle of image as it goes to 2-column size


1 Column = 710X400<br />
2 columns = 730x600<br />
3 columns = 1520x720<br /><br />


1 Column<br />
710 x 400<br />
-This big so it fits on iPad view<br /><br />



2 Column<br />
710 x 400<br />
-Add focus in middle as it will only show middle on desktop but whole image on mobile.<br /><br />



FULL WIDTH<br />
1526x726(ideal size)<br />
763x363(smallest)<br />
-Focus in middle of image as it goes to 2-column size<br />
<br /><br />

One Column No Image

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<div class="row">
	<div class="col-lg-4">
		<!--Start billboard one column no image section-->
		<section class="billboard one-column-no-img">
			<!--These classes make dynamic -->
			<a href="#" data-content="click-billboard">
				<div class="container">
					<div tabindex="0" class="thick-focus" style="background-color:#000000!important;">
						<div class="row">
							<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12 mobile-img display-none">
								<!--These classes make dynamic -->
								<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 mobile-copy billboard-copy">
								<!--These classes make dynamic -->
								<div class="copy">
									<div class="outer">
										<div class="middle">
											<div class="inner">
												<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
												<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
												<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</a>
		</section>
		<!--End billboard one column no image section-->
	</div>
	<div class="col-lg-8">

	</div>

</div>

One Column

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<div class="row">

	<div class="col-lg-4">
		<!--Start billboard one-column section-->
		<section class="billboard one-column">
			<!--These classes make dynamic -->
			<a href="#" data-content="click-billboard">
				<div class="container">
					<div tabindex="0" class="thick-focus" style="background-color:#000000!important;">
						<div class="row">
							<div class="col-sm-12 col-xs-12 mobile-img">
								<!--These classes make dynamic -->
								<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
							</div>
							<div class="col-sm-12 col-xs-12 mobile-copy billboard-copy">
								<!--These classes make dynamic -->
								<div class="copy">
									<div class="outer">
										<div class="middle">
											<div class="inner">
												<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
												<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
												<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</a>
		</section>
		<!--End billboard one-column section-->
	</div>

	<div class="col-lg-8">
	</div>
</div>

Two Column Left Image

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<div class="two-column">
	<div class="row">
		<div class="col-lg-8">
			<!--Start billboard two-column section-->
			<section class="billboard two-column">
				<!--These classes make dynamic -->
				<a href="#" data-content="click-billboard">
					<div class="container">
						<div tabindex="0" class="thick-focus" style="background-color:#000000!important;">
							<div class="row">
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mobile-img">
									<!--These classes make dynamic -->
									<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mobile-copy billboard-copy">
									<!--These classes make dynamic -->
									<div class="copy">
										<div class="outer">
											<div class="middle">
												<div class="inner">
													<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
													<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
													<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</a>
			</section>
			<!--End billboard two-column section-->
		</div>
		<div class="col-lg-4">

			<!--End billboard one-column section-->
		</div>
	</div>
</div>

Two Column Right Image

24 Charac Max Header

Character limit of 72. No more than two lines for one column billboards.

 
<div class="row">
	<div class="col-lg-8">





		<!--start billboard two column image right-->
		<section class="billboard two-column-img-right">
			<!--These classes make dynamic -->
			<a href="#">
				<div class="container">
					<div tabindex="0" class="thick-focus" style="background-color:#000000!important;">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mobile-img col-lg-push-6 col-md-push-6 col-sm-push-6">
								<!--These classes make dynamic -->
								<div class="image img" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mobile-copy billboard-copy col-lg-pull-6 col-md-pull-6 col-sm-pull-6">
								<!--These classes make dynamic -->
								<div class="copy">
									<div class="outer">
										<div class="middle">
											<div class="inner">
												<h1 tabindex="0" style="color:#FFFFFF!important;">24 Charac Max Header</h1>
												<p tabindex="0" style="color:#FFFFFF!important;">Character limit of 72. No more than two lines for one column billboards.</p>
												<div tabindex="0" class="icon icon-Pill-Arrow" style="color:#FFFFFF!important;"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</a>
		</section>
		<!--END billboard two column image right-->
	</div>
	<div class="col-lg-4">
	</div>
</div>

Ecoupon Modal

<div class="slide-modal ecoupons" role="dialog" id="" tabindex="0">
	<button class="close-button close-modal" tabindex="0" aria-controls="" aria-label="Close Popup"></button>

	<div class="loading-container hidden">
		<div class="loading">
			<span class="spinner"></span>
			<p class="loading-text">Loading...</p>
		</div>
	</div>

	<div class="ecoupons-modal">
		<div class="top-section">

			<div class="image-container">
				<img src="/assets/toolkit/images/1-pt-jimmy-dean.jpg" alt="">
			</div>

			<div class="modal-copy">
				<h2 class="header-xs">Save $5.00</h2>
				<p class="modal-description">on any TWO Kellogg's Frosted Flakes®, Froot Loops®, Rice Krispies®, Apple Jacks®, Corn Pops® and/or Corn Flakes® Cereals (9 oz. or Larger, Any Flavor, Mix or Match)</p>

				<div class="tags">
					<div class="expires">Expires 4/2</div>
					<div class="tag blue-tag">Must buy 2</div><!-- Must buy X tag-->

					<div class="tag blue-tag"><i class="fas fa-clone"></i>&nbsp;Redeem 5x</div><!-- Redeem x times tag-->

					<div class="tag orange-tag">2 days left</div><!-- Days left orange tag-->
				</div>

				<div class="button-container">
					<button class="button-medium button-dashed block js-button" aria-label="Clip Coupon" data-content="click-clip"><i class="fas fa-cut"></i>&nbsp;Clip Coupon</button>
				</div>
			</div>

		</div>

		<hr>

		<div class="bottom-section">
			<div class="products">
				<h4 class="small-heading">Eligable Products</h4>

				<div class="flex-table">
					<div class="table-row hide-mobile">
						<span class="data">Product</span>
						<span class="data">UPC</span>
					</div>


					<div class="table-row">
						<span class="bold data">4 Leaf Clover Shake</span>
						<span class="data"><span class="hide-desktop">UPC:&nbsp;</span>0003410</span>
					</div>
					<div class="table-row">
						<span class="bold data">Mint Cookies & Cream Milkshake</span>
						<span class="data"><span class="hide-desktop">UPC:&nbsp;</span>0003412</span>
					</div>


				</div>

			</div>
			<div class="disclainer">
				<h4 class="small-heading">Disclaimer</h4>
				<p class="paragraph-xs">CONSUMER: Limit ONE coupon per purchase of product indicated. Limit of FOUR like coupons in same shopping trip. Consumer pays sales tax. Coupon may not be bought, reproduced, transferred or sold. No cash value. NO CASH BACK. Void where taxed, restricted or prohibited.</p>
				<p class="paragraph-xs">RETAILER: We will redeem this coupon in accordance with our redemption policy, copies available upon request. Cash Value 1/100¢. Void where prohibited, taxed, or restricted by law. Mail coupons to: KELLOGG COMPANY 1354, NCH Marketing Services, P.O. BOX 880001, EL PASO, TX 88588-0001 ®, ™, © 2021 Kellogg NA Co. Kellogg Company participates in the CIC® Member Coupon Integrity Program 62008300</p>

			</div>
		</div>


	</div>

</div>

Floating Action Button

The Floating Action Button is sticky on the bottom of the window.

<div class="fa-button-container">
	<button class="button-large button-primary fa-button" data-content="click-btn" aria-label="Order Food">Order Food</button>
</div>

Non Ordering Store

Select A Store

Select a store with online ordering

Before you can view our menu or place an order, we need to know which store you'll be visiting!

<div class="non-ordering-store">
	<img src="../../assets/toolkit/images/illustration-empty-state-store.jpg" alt="Select A Store">

	<h1>Select a store with online ordering</h1>
	<p>Before you can view our menu or place an order, we need to know which store you'll be visiting!</p>

	<button class="button-primary button-large slide-control" tabindex="0" aria-expanded="false" aria-controls="changeStore" data-slide="slide-down" data-origin="left-primary-menu-slide">Find a Store</button>
</div>

Store Filter

<div class="menu-container">

	<!-- ** Filter Menu ** -->
	<div id="filterMenu" class="sliding-menu hidden" aria-hidden="true">

		<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="mainMenu" aria-expanded="true" aria-label="Close Menu">
		</button>

		<div class="menu-header no-underline">
			<div class="menu-heading">
				<p class="menu-title filter"><span class="icon icon-filter"></span>Filter</p>
			</div>
		</div>

		<div class="drawer-container neg-margin-top">

			<div class="drawer-section no-underline">
				<div class="filters-bar">
					<button class="chip hidden reset" tabindex="0">Reset</button>
				</div>
				<div class="drawer-link">
					<span class="icon icon-Fuel"></span>
					<a href="#0" class="secondary-slide-control link-text" data-content="click-nav" tabindex="0" aria-controls="filterFuelMenu" data-slide="slide-left" data-origin="secondary-menu">Fuel Type
					</a>
					<span class="icon icon-angle-right"></span>
				</div>

				<div class="drawer-link">
					<span class="icon icon-sort"></span>
					<a href="#0" class="secondary-slide-control link-text" data-content="click-nav" tabindex="0" aria-controls="filterSortMenu" data-slide="slide-left" data-origin="secondary-menu">Sort
					</a>
					<span class="icon icon-angle-right"></span>
				</div>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Online Ordering" data-target="Online Ordering" checked="true">
						<span class="checkmark"></span>
						Online Ordering
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Cafe" data-target="Cafe">
						<span class="checkmark"></span>
						Cafe
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Coffee" data-target="Coffee">
						<span class="checkmark"></span>
						Coffee
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Smoothies and Espresso" data-target="Smoothies and Espresso">
						<span class="checkmark"></span>
						Smoothies and Espresso
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Beer" data-target="Beer">
						<span class="checkmark"></span>
						Beer
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Great to Go" data-target="Great to Go">
						<span class="checkmark"></span>
						Great to Go
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Free Air" data-target="Free Air">
						<span class="checkmark"></span>
						Free Air
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Carwash" data-target="Carwash">
						<span class="checkmark"></span>
						Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Soft Cloth Carwash" data-target="Soft Cloth Carwash">
						<span class="checkmark"></span>
						Soft Cloth Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Touch Free Carwash" data-target="Touch Free Carwash">
						<span class="checkmark"></span>
						Touch Free Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Diesel" data-target="Diesel">
						<span class="checkmark"></span>
						Diesel
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Kerosene" data-target="Kerosene">
						<span class="checkmark"></span>
						Kerosene
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="TopTier Detergent Gasoline" data-target="TopTier Detergent Gasoline">
						<span class="checkmark"></span>
						TopTier Detergent Gasoline
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Bait" data-target="Bait">
						<span class="checkmark"></span>
						Bait
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Surcharge Free ATM" data-target="Surcharge Free ATM">
						<span class="checkmark"></span>
						Surcharge Free ATM
					</label>
				</div>

			</div>
		</div>
	</div>

	<!-- ** Filter Fuel Menu ** -->
	<div id="filterFuelMenu" class="sliding-menu hidden" aria-hidden="true">

		<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="filterFuelMenu" aria-expanded="true" aria-label="Close Menu">
		</button>

		<div class="menu-header no-underline">
			<div class="menu-heading">
				<p class="menu-title filter"><span class="icon icon-filter"></span>Filter</p>
			</div>
		</div>

		<div class="drawer-container neg-margin-top">

			<div class="drawer-section no-underline">

				<div class="filters-bar">
					<button class="chip hidden reset" tabindex="0">Reset</button>
				</div>

				<div class="drawer-link">
					<span class="icon icon-angle-left"></span>Back
					<button class="back-button" tabindex="0" data-content="click-nav" tabindex="0" aria-controls="filterMenu" data-slide="slide-right" data-origin="secondary-menu">
					</button>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="fuel" data-target="Unleaded-sort">
						<span class="radio"></span>
						Unleaded
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="fuel" data-target="Plus-sort">
						<span class="radio"></span>
						Plus
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="fuel" data-target="Premium-sort">
						<span class="radio"></span>
						Premium
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="fuel" data-target="Diesel-sort">
						<span class="radio"></span>
						Diesel
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="fuel" data-target="Kerosene-sort">
						<span class="radio"></span>
						Kerosene
					</label>
				</div>
				<!-- Display if one of the radio buttons is selected -->
				<button class="filter-clear secondary-icon-left hidden" tabindex="0" aria-controls="fuel-sort" data-secondary="fuel">Clear</button>
			</div>
		</div>
	</div>

	<!-- ** Filter Sort Menu ** -->
	<div id="filterSortMenu" class="sliding-menu hidden" aria-hidden="true">

		<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="filterSortMenu" aria-expanded="true" aria-label="Close Menu">
		</button>

		<div class="menu-header no-underline">
			<div class="menu-heading">
				<p class="menu-title filter"><span class="icon icon-filter"></span>Filter</p>
			</div>
		</div>

		<div class="drawer-container neg-margin-top">

			<div class="drawer-section no-underline">

				<div class="filters-bar">
					<button class="chip hidden reset" tabindex="0">Reset</button>
				</div>

				<div class="drawer-link">
					<span class="icon icon-angle-left"></span>Back
					<button class="back-button" tabindex="0" data-content="click-nav" tabindex="0" aria-controls="filterMenu" data-slide="slide-right" data-origin="secondary-menu">
					</button>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="Sort" data-target="Relevance">
						<span class="radio"></span>
						Relevance
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="Sort" data-target="Date Added">
						<span class="radio"></span>
						Date Added
					</label>
				</div>
				<!-- Display if one of the radio buttons is selected-->
				<button class="filter-clear secondary-icon-right hidden" tabindex="0" aria-controls="sort" data-secondary="Sort">Clear</button>
			</div>
		</div>
	</div>

</div>
<!--End Menu Container-->

Store List

Current Store Carwash Beer

Selected Store

2.7 miles away

200 Allegheny River Blvd

$2.549

Unleaded

Carwash Beer

Fox Chapel GetGo

2.7 miles away

200 Allegheny River Blvd

$2.549

Unleaded

Carwash

Fox Chapel GetGo

4.9 miles away

200 Allegheny River Blvd

$2.54

Unleaded

Online ordering not available.

Carwash Beer

Fox Chapel GetGo

4.9 miles away

200 Allegheny River Blvd

$2.54

Unleaded

Nearby

Carwash Beer

Fox Chapel GetGo

2.7 miles away

200 Allegheny River Blvd

$2.54

Unleaded

Carwash

Pen Hills Giant GetGo

4.9 miles away

200 Allegheny River Blvd

$2.54

Unleaded

Carwash Beer

Pen Hills GetGo

4.9 miles away

200 Allegheny River Blvd

Load More 
<div id="divLocationsStoreList" class="store-container no-margin-top">
	<!-- Selected Store -->
	<div class="store-section">
		<div class="tags">
			<span class="tag gray-tag">Current Store</span>
			<span class="tag blue-tag">Carwash</span>
			<span class="tag blue-tag">Beer</span>
		</div>
		<div class="store-info">
			<p class="store-name no-underline">Selected Store</p>
			<p class="distance">2.7 miles away</p>
			<p class="store-address">200 Allegheny River Blvd</p>

		</div>
		<div class="fuel-price">
			<p class="price">$2.54<sup>9</sup></p>
			<p class="subtext">Unleaded</p>
		</div>
	</div>

	<div id="flyoutRecent" class="choose-store-heading dropdown-trigger" role="button" aria-expanded="true" aria-controls="recentStores" tabindex="0">
		<h2>Recent</h2>
		<span class="icon icon-angle-down"></span>
	</div>

	<div id="recentStores" class="recent-container">
		<div class="store-section">
			<div class="tags">
				<span class="tag blue-tag">Carwash</span>
				<span class="tag blue-tag">Beer</span>
			</div>
			<div class="store-info">
				<p class="store-name no-underline">Fox Chapel GetGo</p>
				<p class="distance">2.7 miles away</p>
				<p class="store-address">200 Allegheny River Blvd</p>

			</div>
			<div class="fuel-price">
				<p class="price">$2.54<sup>9</sup></p>
				<p class="subtext">Unleaded</p>
			</div>
			<div class="width100">
				<button class="button-secondary button-medium" tabindex="0" aria-label="Set Fox Chapel GetGo as my Store">
					Confirm Store
				</button>
			</div>
		</div>
		<div class="store-section">
			<div class="tags">
				<span class="tag blue-tag">Carwash</span>
			</div>
			<div class="store-info">
				<p class="store-name no-underline">Fox Chapel GetGo</p>
				<p class="distance">4.9 miles away</p>
				<p class="store-address">200 Allegheny River Blvd</p>

			</div>
			<div class="fuel-price">
				<p class="price">$2.54</p>
				<p class="subtext">Unleaded</p>
			</div>
			<!-- If online ordering available, display button -->
			<!-- <button class="button-secondary button-medium" tabindex="0"
                aria-label="Set Pen Hills Giant Eagle as my Store">Confirm Store</button> -->
			<!-- if online ordering not available, display text -->
			<p class="subtext">Online ordering not available.</p>
		</div>
		<div class="store-section">
			<div class="tags">
				<span class="tag blue-tag">Carwash</span>
				<span class="tag blue-tag">Beer</span>
			</div>
			<div class="store-info">
				<p class="store-name no-underline">Fox Chapel GetGo</p>
				<p class="distance">4.9 miles away</p>
				<p class="store-address">200 Allegheny River Blvd</p>
			</div>
			<div class="fuel-price">
				<p class="price">$2.54</p>
				<p class="subtext">Unleaded</p>
			</div>
			<div class="width100">
				<button class="button-secondary button-medium" tabindex="0" aria-label="Set Fox Chapel GetGo as my Store">
					Confirm Store
				</button>
			</div>
		</div>
	</div>
	<div class="choose-store-heading">
		<h2>Nearby</h2>
	</div>

	<div class="store-section">
		<div class="tags">
			<span class="tag blue-tag">Carwash</span>
			<span class="tag blue-tag">Beer</span>
		</div>
		<div class="store-info">
			<p class="store-name no-underline">Fox Chapel GetGo</p>
			<p class="distance">2.7 miles away</p>
			<p class="store-address">200 Allegheny River Blvd</p>
		</div>
		<div class="fuel-price">
			<p class="price">$2.54</p>
			<p class="subtext">Unleaded</p>
		</div>
		<div class="width100">
			<button class="button-secondary button-medium" tabindex="0" aria-label="Set Fox Chapel GetGo as my Store">
				Confirm Store
			</button>
		</div>
	</div>
	<div class="store-section">
		<div class="tags">
			<span class="tag blue-tag">Carwash</span>
		</div>
		<div class="store-info">
			<p class="store-name no-underline">Pen Hills Giant GetGo</p>
			<p class="distance">4.9 miles away</p>
			<p class="store-address">200 Allegheny River Blvd</p>
		</div>
		<div class="fuel-price">
			<p class="price">$2.54</p>
			<p class="subtext">Unleaded</p>
		</div>
		<div class="width100">
			<button class="button-secondary button-medium" tabindex="0" aria-label="Set Pen Hills GetGo as my Store">
				Confirm Store
			</button>
		</div>
	</div>
	<div class="store-section">
		<div class="tags">
			<span class="tag blue-tag">Carwash</span>
			<span class="tag blue-tag">Beer</span>
		</div>
		<div class="store-info">
			<p class="store-name no-underline">Pen Hills GetGo</p>
			<p class="distance">4.9 miles away</p>
			<p class="store-address">200 Allegheny River Blvd</p>
		</div>
		<!-- <div class="fuel-price">
            <p class="price">$2.54</p>
            <p class="subtext">Unleaded</p>
        </div> -->
		<div class="width100">
			<button class="button-secondary button-medium" tabindex="0" aria-label="Set Pen Hills GetGo as my Store">
				Confirm Store
			</button>
		</div>

	</div>
	<div class="center pad10">
		<a href="#0" class="load-more button-medium button-text" tabindex="0">Load More</a>
	</div>
</div>

Store Tile

Nearby Stores
View Stores  
GetGo Store Outline
Find a Store
Nearest
Carwash
Beer
Baum Boulevard GetGo
2.6 mi
$2.99 Unleaded
Order Food
Cafe
Carwash
Beer
O'Hara GetGo
0.5 mi
$2.99 Unleaded
Order Food
Beer
Verona Getgo
1.5 mi
$2.99 Unleaded
Order Food 
<div class="theme-getgo">

	<section class="getgo-store-tile">
		<div class="category-header">Nearby Stores</div>
		<div class="right-link">
			<a href="#" data-content="click-allrecipes" aria-label="Giant Eagle Button" class="redva-link">View Stores&nbsp;&nbsp;<i class="fal fa-angle-right"></i></a>
		</div>
		<div class="filter-options">
			<div class="scroll">
				<div class="row ml0">
					<div class="col-lg-20 col-sm-20 col-xs-20 inline">
						<div class="store-tile">
							<img src="/assets/toolkit/images/getgo-store.png" alt="GetGo Store Outline" class="center gg-store">
							<div class="center pp">Find a Store</div>
							<div class="animated-input-container">
								<input class="search-input" onfocus="inputAnimate(this)" type="text" name="location" value="" autocomplete="off" id="uniqueID" />
								<div class="input-button">
									<button href="#0" role="button" aria-label="Search Button"><span class="icon-search"></span></button>
								</div>

								<div class="animated-label">
									<label for="uniqueID">ZIP Code or Address</label>
								</div>
								<div class="geo">
									<button>
										<span class="icon-geolocation"></span>
										Use My Location
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-20 col-sm-20 col-xs-20 inline">
						<div class="store-tile">
							<div class="tag gray-tag inline">Nearest</div>
							<div class="tag blue-tag inline">Carwash</div>
							<div class="tag blue-tag inline">Beer</div>
							<div class="left-info">
								<div class="store-name">Baum Boulevard GetGo</div>
								<div class="miles">2.6 mi</div>
							</div>
							<div class="right-info">
								<span class="gas-price">$2.99 </span>
								<span class="gas">Unleaded</span>
							</div>
							<div class="button">
								<a href="#0" class="btn btn-primary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">Order Food</a>
							</div>
						</div>
					</div>
					<div class="col-lg-20 col-sm-20 col-xs-20 inline">
						<div class="store-tile">
							<div class="tag blue-tag inline">Cafe</div>
							<div class="tag blue-tag inline">Carwash</div>
							<div class="tag blue-tag  inline">Beer</div>
							<div class="left-info">
								<div class="store-name">O'Hara GetGo</div>
								<div class="miles">0.5 mi</div>
							</div>
							<div class="right-info">
								<span class="gas-price">$2.99 </span>
								<span class="gas">Unleaded</span>
							</div>
							<div class="button">
								<a href="#0" class="btn btn-primary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">Order Food</a>
							</div>
						</div>
					</div>
					<div class="col-lg-20 col-sm-20 col-xs-20 inline">
						<div class="store-tile">
							<div class="tags">
								<span class="tag blue-tag " data-bind="visible: $root.IsTagVisible($data,'Beer')">Beer</span>
							</div>

							<div class="left-info">
								<div class="store-name">Verona Getgo</div>
								<div class="miles">1.5 mi</div>
							</div>
							<div class="right-info">
								<span class="gas-price">$2.99 </span>
								<span class="gas">Unleaded</span>
							</div>
							<div class="button">
								<a href="#0" class="btn btn-primary btn-small" data-content="click-billboard-btn" aria-label="Giant Eagle Button">Order Food</a>
							</div>
						</div>
					</div>

					<!-- <div class="col-lg-20 col-sm-20 col-xs-20 inline">
              <div class="store-tile">
                <img src="/assets/toolkit/images/getgo-store.png" alt="GetGo Store Outline" class="center gg-store">
                <div class="center pp">Find a Store</div>
                <div class="animated-input-container">
                    <input class="animated-input" type="text" name="location" value="" autocomplete="off" id="uniqueID"/>
                    <div class="input-button">
                        <button href="#0" role="button" aria-label="Search Button"><span class="icon-search"></span></button>
                    </div>

                    <div class="animated-label">
                        <label for="uniqueID">ZIP Code or Address</label>
                    </div>
                    <div class="geo">
                        <button>
                            <span class="icon-geolocation"></span>
                            Use My Location
                        </button>
                    </div>
                </div>
            </div>
            </div> -->



					<!--
          <div class="bookend inline">
             <a href="#0">
               <span class="icon icon-Store-copy"></span>

             <div class="view-all">Find a Store<i class="far fa-angle-right"></i></div>
           </a>
          </div>

        -->
				</div>
			</div>
		</div>

	</section>
</div>

Weekly Deals

Top Deals
View Deals  
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
Online Only

Breakfast Sammich

Free Hashbrown with Sandwich
View All
 
<div class="theme-getgo">

	<section class="weekly-deals">
		<div class="category-header">Top Deals</div>
		<div class="right-link">
			<a href="#" data-content="click-allrecipes" aria-label="Giant Eagle Button" class="redva-link">View Deals&nbsp;&nbsp;<i class="fal fa-angle-right"></i></a>
		</div>
		<div class="filter-options center">
			<div class="scroll">
				<div class="row">
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" alt="Weekly Deal" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="one-fifth col-md-4 col-sm-4 col-xs-6">
						<a href="#" data-content="click-weeklydeal" aria-label="Weekly Deal">
							<section class="card card-component" tabindex="0">
								<div>
									<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/sammich.png');">
									</div>
									<div class="text-box">
										<div class="tag gray-tag inline">Online Only</div>
										<h3 class="card-title" tabindex="0">Breakfast Sammich</h3>
										<p class="copy">Free Hashbrown with Sandwich</p>
									</div>
								</div>
							</section>
						</a>
					</div>
					<div class="bookend inline">
						<a href="#0" data-content="click-viewalldeals" aria-label="View All Getgo Deals">
							<span class="icon icon-Sale"></span>

							<div class="view-all">View All<i class="far fa-angle-right"></i></div>
						</a>
					</div>
				</div>
			</div>

	</section>

</div>