Pricing Table Page Block


This code snippet provides a page block for creating a pricing table with 4 plans, each with their own list of features and a call to action button. It’s easy to customize and use, and is a great way to give your website visitors an overview of your services and pricing. The code snippet will save you time and effort, leaving you more time to focus on other aspects of your website. Get started quickly and easily with this snippet from FreeFrontend.dev.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Pricing Table</span>
				<h2 class="display-5 fw-bold">Our Pricing</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-lg-3">
				<div class="card text-center border-0">
					<div class="card-body py-5">
						<div class="mb-3 mx-auto">
							<svg class="bi bi-rocket" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
							<path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z"></path>
							<path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z"></path>
							<path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z"></path></svg>
						</div>
						<h5 class="fw-bold">Standard</h5>
						<div class="display-3 fw-bold mt-4 text-primary">
							$19
						</div>
						<ul class="list-unstyled mt-4">
							<li class="mb-3">1 Domain</li>
							<li class="mb-3">1,000 Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="card text-center border-0">
					<div class="card-body py-5">
						<div class="mb-3 mx-auto">
							<svg class="bi bi-magic" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
							<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"></path></svg>
						</div>
						<h5 class="fw-bold">Plus</h5>
						<div class="display-3 fw-bold mt-4 text-primary">
							$26
						</div>
						<ul class="list-unstyled mt-4">
							<li class="mb-3">10 Domains</li>
							<li class="mb-3">10,000 Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="card text-center border-0">
					<div class="card-body bg-light py-5">
						<div class="mb-3 mx-auto">
							<svg class="bi bi-buildings" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
							<path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022ZM6 8.694 1 10.36V15h5V8.694ZM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15Z"></path>
							<path d="M2 11h1v1H2v-1Zm2 0h1v1H4v-1Zm-2 2h1v1H2v-1Zm2 0h1v1H4v-1Zm4-4h1v1H8V9Zm2 0h1v1h-1V9Zm-2 2h1v1H8v-1Zm2 0h1v1h-1v-1Zm2-2h1v1h-1V9Zm0 2h1v1h-1v-1ZM8 7h1v1H8V7Zm2 0h1v1h-1V7Zm2 0h1v1h-1V7ZM8 5h1v1H8V5Zm2 0h1v1h-1V5Zm2 0h1v1h-1V5Zm0-2h1v1h-1V3Z"></path></svg>
						</div>
						<h5 class="fw-bold">Pro</h5>
						<div class="display-3 fw-bold mt-4 text-primary">
							$34
						</div>
						<ul class="list-unstyled mt-4">
							<li class="mb-3">Unlimited Domains</li>
							<li class="mb-3">Unlimited Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div class="card text-center border-0">
					<div class="card-body py-5">
						<div class="mb-3 mx-auto">
							<svg class="bi bi-graph-up-arrow" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
							<path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" fill-rule="evenodd"></path></svg>
						</div>
						<h5 class="fw-bold">Ultimate</h5>
						<div class="display-3 fw-bold mt-4 text-primary">
							$49
						</div>
						<ul class="list-unstyled mt-4">
							<li class="mb-3">Unmetered Domains</li>
							<li class="mb-3">Unmetered Visitors</li>
							<li class="mb-3">24/7 Support</li>
						</ul><a class="btn btn-primary btn-lg mt-4" href="">Learn more</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top