itsm-pc-handle/assets/views/utility_pricing_table.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.utilities.PRICING">{{ mainTitle }}</h1>
			<span class="mainDescription">If you're making a rockin' marketing site for a subscription-based product, you're likely in need of a pricing table. </span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: PRICING TABLE EXAMPLE 1 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">First <span class="text-bold">example</span></h5>
			<p>
				These tables fill 100% of their container and are made from a simple unordered list.
			</p>
			<div class="pricing-table">
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan1">
						<li class="plan-name">
							Basic
						</li>
						<li class="plan-price">
							<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-green btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan2 featured">
						<li class="plan-name">
							Standard
						</li>
						<li class="plan-price">
							<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-green btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan3">
						<li class="plan-name">
							Advanced
						</li>
						<li class="plan-price">
							<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-green btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan4">
						<li class="plan-name">
							Mighty
						</li>
						<li class="plan-price">
							<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-green btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 1 -->
<!-- start: PRICING TABLE EXAMPLE 2 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Second <span class="text-bold">example</span></h5>
			<p>
				These tables fill 100% of their container and are made from a simple unordered list.
			</p>
			<div class="pricing-table pricing-green">
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan1">
						<li class="plan-name">
							Basic
						</li>
						<li class="plan-price">
							<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-red btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan2 featured">
						<li class="plan-name">
							Standard
						</li>
						<li class="plan-price">
							<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-red btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan3">
						<li class="plan-name">
							Advanced
						</li>
						<li class="plan-price">
							<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-red btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan4">
						<li class="plan-name">
							Mighty
						</li>
						<li class="plan-price">
							<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-red btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 2 -->
<!-- start: PRICING TABLE EXAMPLE 3 -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Third <span class="text-bold">example</span></h5>
			<p>
				These tables fill 100% of their container and are made from a simple unordered list.
			</p>
			<div class="pricing-table pricing-blue">
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan1">
						<li class="plan-name">
							Basic
						</li>
						<li class="plan-price">
							<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan2 featured">
						<li class="plan-name">
							Standard
						</li>
						<li class="plan-price">
							<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan3">
						<li class="plan-name">
							Advanced
						</li>
						<li class="plan-price">
							<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan4">
						<li class="plan-name">
							Mighty
						</li>
						<li class="plan-price">
							<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 3 -->
<!-- start: PRICING TABLE EXAMPLE 4 -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Fourth <span class="text-bold">example</span></h5>
			<p>
				These tables fill 100% of their container and are made from a simple unordered list.
			</p>
			<div class="pricing-table pricing-red">
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan1">
						<li class="plan-name">
							Basic
						</li>
						<li class="plan-price">
							<h3> $19 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan2 featured">
						<li class="plan-name">
							Standard
						</li>
						<li class="plan-price">
							<h3> $29 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>5GB</strong> Storage
						</li>
						<li>
							<strong>1GB</strong> RAM
						</li>
						<li>
							<strong>400GB</strong> Bandwidth
						</li>
						<li>
							<strong>10</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan3">
						<li class="plan-name">
							Advanced
						</li>
						<li class="plan-price">
							<h3> $49 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-3 col-xs-6">
					<ul class="plan plan4">
						<li class="plan-name">
							Mighty
						</li>
						<li class="plan-price">
							<h3> $99 <span class="price-cents">99</span><span class="price-month">/month</span></h3>
						</li>
						<li>
							<strong>50GB</strong> Storage
						</li>
						<li>
							<strong>8GB</strong> RAM
						</li>
						<li>
							<strong>1024GB</strong> Bandwidth
						</li>
						<li>
							<strong>Unlimited</strong> Email Address
						</li>
						<li>
							<strong>Forum</strong> Support
						</li>
						<li class="plan-action">
							<a href="#" class="btn btn-blue btn-lg">
								Signup
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: PRICING TABLE EXAMPLE 4 -->