"Price Card"
Bootstrap 4.0.0 Snippet by emppas

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <div class="container"> <div class="row"> <!--basic--> <div class="col s12 m4"> <div class="card"> <div class="card-content"> <div class="card-title green white-text"> <h3>Basic</h3> <h5>$29/month</h5> </div> <ul class="collection"> <li class="collection-item">25GB Disk Space</li> <li class="collection-item">30 Email Address</li> <li class="collection-item">1 Domain</li> <li class="collection-item">Live Support</li> <li class="collection-item">Unlimited Bandwidth</li> </ul> </div> <div class="card-action"> <div class="btn btn-block btn-large pink">Sing Up</div> </div> </div> </div> <!--standard--> <div class="col s12 m4"> <div class="card"> <div class="card-content"> <div class="card-title yellow darken-4 white-text"> <h3>Standard</h3> <h5>$45/month</h5> </div> <ul class="collection"> <li class="collection-item">80GB Disk Space</li> <li class="collection-item">100 Email Address</li> <li class="collection-item">20 Domains</li> <li class="collection-item">Live Support</li> <li class="collection-item">Unlimited Bandwidth</li> </ul> </div> <div class="card-action"> <div class="btn btn-block btn-large pink">Sing Up</div> </div> </div> </div> <!--pro--> <div class="col s12 m4"> <div class="card"> <div class="card-content"> <div class="card-title blue white-text"> <h3>Pro</h3> <h5>$67/month</h5> </div> <ul class="collection"> <li class="collection-item">15GB Disk Space</li> <li class="collection-item">Unlimited Email Address</li> <li class="collection-item">Unlimited Domains</li> <li class="collection-item">Live Support</li> <li class="collection-item">Unlimited Bandwidth</li> </ul> </div> <div class="card-action"> <div class="btn btn-block btn-large pink">Sing Up</div> </div> </div> </div> </div> </div>
.container { margin-top: 100px; } .card-title { padding: 10px; } .card-content { text-align: center; padding: 0px !important; } ul li { padding: 20px !important; font-weight: bold; } .card { transition: .5s; } .card:hover { transform: scale(1.05); transition: .5s; }

Related: See More


Questions / Comments: