"Material Card for Google Maps"
Bootstrap 3.3.0 Snippet by kirkbackus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <!-- Card Projects --> <div class="col-md-4"> <div class="card"> <div class="card-image"> <span class="card-icons"> <ul class="nav nav-pills"> <li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li> </ul> </span> <img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO"> <span class="card-title">Columbia</span> </div> <div class="card-content"> <div class="row" style="text-align: center"> <div class="col-xs-4"> <time> <i class="fa fa-calendar"></i> 10/14/2015 </time> </div> <div class="col-xs-4"> <i class="fa fa-cube"></i> 13777 </div> <div class="col-xs-4"> <i class="fa fa-recycle"></i> 171864 </div> </div> <hr style="margin: 10px 0"/> </div> <div class="card-action"> <i class="fa fa-map-marker"></i> Columbia, MO <span class="pull-right label label-warning">DORMANT</span> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-image"> <span class="card-icons"> <ul class="nav nav-pills"> <li class="presentation"><a href="#"><span class="glyphicon glyphicon-cloud"></span></a></li> <li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li> </ul> </span> <img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO"> <span class="card-title">St. Louis</span> </div> <div class="card-content"> <p>Cards for display in portfolio style material design by Google, modified so that Google Maps would be displayed is a way that is still readable.</p> </div> <div class="card-action"> <i class="fa fa-map-marker"></i> St. Louis, MO <span class="pull-right label label-success">$199</span> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-image"> <span class="card-icons"> <ul class="nav nav-pills"> <li class="presentation"><a href="#"><span class="glyphicon glyphicon-cloud"></span></a></li> <li class="presentation"><a href="#"><span class="glyphicon glyphicon-credit-card"></span></a></li> </ul> </span> <img class="img-responsive" src="https://maps.googleapis.com/maps/api/staticmap?size=555x180&markers=color:blue|3102-Vandiver-Dr,Columbia,MO|509-Stadium-Blvd,-65201,St.-Louis,MO"> <span class="card-title">Columbia</span> </div> <div class="card-content"> <p>Cards for display in portfolio style material design by Google, modified so that Google Maps would be displayed is a way that is still readable.</p> </div> <div class="card-action"> <i class="fa fa-map-marker"></i> Columbia, MO <span class="pull-right label label-danger">INACTIVE</span> </div> </div> </div> </div> </div>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"); .card { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .card { margin-top: 10px; box-sizing: border-box; border-radius: 2px; background-clip: padding-box; } .card span.card-title { color: #fff; font-size: 24px; font-weight: 300; text-transform: uppercase; } .card .card-image { position: relative; overflow: hidden; } .card .card-image img { border-radius: 2px 2px 0 0; background-clip: padding-box; position: relative; z-index: -1; } .card .card-image span.card-title { position: absolute; bottom: 0; left: 0; padding: 16px; } .card .card-image span.card-icons { position: absolute; right: 0; padding: 16px; } .card .card-image { box-shadow: inset 0 -140px 100px -100px rgba(0,0,0,1); } .card .card-content { padding: 16px; border-radius: 0 0 2px 2px; background-clip: padding-box; box-sizing: border-box; } .card .card-content p { margin: 0; color: inherit; } .card .card-content span.card-title { line-height: 48px; } .card .card-action { border-top: 1px solid rgba(160, 160, 160, 0.2); padding: 16px; } .card .card-action a { color: #ffab40; margin-right: 16px; transition: color 0.3s ease; text-transform: uppercase; } .card .card-action a:hover { color: #ffd8a6; text-decoration: none; } .card .card-image span.card-icons ul { background: rgba(255,255,255,0.7); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); border-radius: 2px; } .card .card-image span.card-icons .nav>li>a span { transition: 0.2s transform; } .card .card-image span.card-icons .nav>li>a:hover span, .card .card-image span.card-icons .nav>li>a:focus span { transform: translate(0, -4px); } .card .card-image span.card-icons .nav>li>a:hover, .card .card-image span.card-icons .nav>li>a:focus { background-color: transparent; } .card .card-action .label { padding: 10px; margin: -5px; }

Related: See More


Questions / Comments: