Call to Action Code with Icons


This code snippet represents a call to action component that features two distinct call to actions, presented in a two-column layout. Each call to action has its own icon and text to help communicate the main message more effectively. It is built using Bootstrap, which allows it to be responsive and adjust its layout based on the screen size it’s being viewed on, and provides consistent styling for the icon and text elements. The overall design is simple, visually clear, and easy to understand, making it easy for users to take either of the desired actions.

<section class="py-5">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="d-sm-flex">
					<div class="me-4">
						<svg class="bi bi-box-arrow-right" fill="currentColor" height="96" viewbox="0 0 16 16" width="96" xmlns="http://www.w3.org/2000/svg">
						<path d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" fill-rule="evenodd"></path>
						<path d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" fill-rule="evenodd"></path></svg>
					</div>
					<div class="pe-lg-3">
						<h2 class="display-5 fw-semibold pb-2">Register</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, ipsa corrupti quos id cupiditate amet natus sapiente modi repudiandae eum ullam voluptatum</p><a class="btn btn-primary" href="">Sign Up</a>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="d-sm-flex mt-md-0 mt-4">
					<div class="me-4">
						<svg class="bi bi-headset" fill="currentColor" height="96" viewbox="0 0 16 16" width="96" xmlns="http://www.w3.org/2000/svg">
						<path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"></path></svg>
					</div>
					<div class="pe-lg-3">
						<h2 class="display-5 fw-semibold pb-2">Support</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, ipsa corrupti quos id cupiditate amet natus sapiente modi repudiandae eum ullam voluptatum</p><a class="btn btn-primary" href="">Contact Us</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top