Pricing Table with Images

539 ViewsFreeFrontend.dev

This code snippet from FreeFrontend.dev provides an easy-to-use method to create a pricing table with 3 plans. Each plan includes an image and an easy-to-customize description, making it a great way to display pricing tiers to potential customers. With just a few lines of code, you can set up a comprehensive pricing table quickly and easily.

<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-4">
				<div class="card text-center border-0 mb-3 mb-md-0">
					<img class="card-img-top" src="https://freefrontend.dev/assets/rectangle-wide.png">
					<div class="card-body bg-light py-5">
						<h5 class="fw-bold">Basic</h5>
						<div>
							For Freelancers
						</div>
						<div class="display-3 fw-bold mt-4 text-primary">
							$19
						</div>
						<div class="fw-bold">
							Monthly
						</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-4">
				<div class="card text-center border-0 mb-3 mb-md-0">
					<img class="card-img-top" src="https://freefrontend.dev/assets/rectangle-wide.png">
					<div class="card-body bg-light py-5">
						<h5 class="fw-bold">Standard</h5>
						<div>
							For Teams
						</div>
						<div class="display-3 fw-bold mt-4 text-primary">
							$26
						</div>
						<div class="fw-bold">
							Monthly
						</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-4">
				<div class="card text-center border-0 mb-3 mb-md-0">
					<img class="card-img-top" src="https://freefrontend.dev/assets/rectangle-wide.png">
					<div class="card-body bg-light py-5">
						<h5 class="fw-bold">Pro</h5>
						<div>
							For Companies
						</div>
						<div class="display-3 fw-bold mt-4 text-primary">
							$34
						</div>
						<div class="fw-bold">
							Monthly
						</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>
	</div>
</section>

Related Code Examples

Pricing Table Example

This pricing table example gives you a great way to showcase the different plans you offer, allowing potential customers to […]

2 Plan Pricing Table

This code snippet contains a pricing table with two plans, designed for Bootstrap. It includes a list of features for […]

Single Plan Pricing Table

This code snippet from FreeFrontend.dev provides a single plan pricing table for showcasing a single product or service. The table […]

Pricing Table Page Block

This code snippet provides a page block for creating a pricing table with 4 plans, each with their own list […]

Pricing Table Section

This code snippet is a great choice for quickly and easily creating a pricing table section for your website. It […]

Pricing Table with Images

This code snippet from FreeFrontend.dev provides an easy-to-use method to create a pricing table with 3 plans. Each plan includes […]