tabler-ui/src/_includes/cards/credit-card.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<!-- Creadit Card component -->
<div class="card">
	<div class="card-body">
		<div class="form-group">
			<label class="form-label">Cardholder's name</label>
			<input type="text" class="form-control">
		</div>
		<div class="form-group">
			<label class="form-label">Card number</label>
			<input type="text" class="form-control">
		</div>
		<div class="form-group">
			<div class="row gutters-sm">
				<div class="col">
					<label class="form-label">Expiry Date</label>
					<div class="row gutters-sm">
						<div class="col">
							<select name="" class="form-control custom-select">
								<option value="">January</option>
								<option value="">February</option>
								<option value="">March</option>
								<option value="">April</option>
								<option value="">May</option>
								<option value="">June</option>
								<option value="">Juli</option>
								<option value="">August</option>
								<option value="">September</option>
								<option value="">October</option>
								<option value="">November</option>
								<option value="">December</option>
							</select>
						</div>
						<div class="col-auto">
							<select name="" class="form-control custom-select">
								<option value="">2017</option>
								<option value="">2018</option>
								<option value="">2019</option>
								<option value="">2020</option>
								<option value="">2021</option>
								<option value="">2022</option>
								<option value="">2023</option>
								<option value="">2024</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-3">
					<label class="form-label">CVV</label>
					<input type="text" class="form-control">
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer">
		<div class="d-flex">
			<a href="" class="btn btn-link">Cancel</a>
			<button class="btn btn-primary ml-auto">Complete Order</button>
		</div>
	</div>
</div>