"card with border user-interface"
Bootstrap 4.0.0 Snippet by shu3aybbadran

Post to Facebook Tweet this

<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 ----------> <!-- AlPhaD UI - cards ui * Version: 1.0 * Build Date : 19-03-2017 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * License : MIT --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Cards by AlPhaD</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- font-awesome icons --> <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> <!-- card css --> <link rel="stylesheet" href="card.css"> </head> <body> <!-- demo-title --> <div class="demo-title"> <h1 class="display-1">Cards</h1> <p>by <a href="#">@AlPhaD</a></p> <p>contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p> <p>more from Alphad <a href="https://bootsnipp.com/snippets/xr3eN">post ui</a></p> </div> <div class="cards clearfix"> <!-- card #1 --> <div class="card" id="card1"> <div class="content"> <h4 class="title">"At the end of our lives we all ask, 'Did I live? Did I love? Did I matter?"</h4> <h6 class="text">- Brendon Burchard.</h6> </div> </div> <!-- card #2 --> <div class="card" id="card2"> <img src="http://www.pngall.com/wp-content/uploads/2016/05/Model-PNG-HD.png" class="" alt=""> <div class="caption"> <h3 class="text">Alphad</h3> <div class="action btn btn-light">action</div> </div> </div> </div> <div class="demo-more d-lg-flex justify-content-around"> <p><i class="fa fa-users"></i> contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p> <p><i class="fa fa-gift"></i> more ui and layout <a href="https://github.com/alphadsy">alphadsy</a></p> <p><i class="fa fa-balance-scale"></i> under MIT</p> <p><i class="fa fa-camera-retro"></i> bg-image from <a href="http://stocksnap.io/">stocksnap</a></p> </div> </body> </html>
/* AlPhaD UI - card ui * Version: 1.0 * Build Date : 19-03-2017 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * Lic : MIT [Layout] * body - card / #card + caption - title - text - action [Color codes] [Typography] [content table] - card main css - #card1 css . . . - demo css (for demo purpose only) */ /* ======================================= card ========================================*/ /*=== main card style ===*/ .card { position: relative; border-radius: .5rem; box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5; transition: box-shadow 0.1s ease, transform 0.1s ease; margin-bottom: 30px; } /* ======================================= card#1 ========================================*/ /*=== card with border ===*/ #card1 { text-align: center; padding: 50px 50px; color:#fff; background-color:#434A54; } #card1 .content { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px 15px 25px 15px; } #card1::after { position: absolute; display: block; width: calc(100% - 10px); height: calc(100% - 10px); content: ''; top: 5px; left: 5px; z-index: 1; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.8); } /* ======================================= card#2 ========================================*/ #card2 { position: relative; background: #d3cce3; background: linear-gradient(to right, #d3cce3, #e9e4f0); outline: 10px solid white; outline-offset: -30px; } #card2::after { position: absolute; bottom: 20px; left: 15%; height: 10px; width:70%; display: block; content: ''; z-index: 15; background-color: white; } #card2 img { height: inherit; position: absolute; top: 0%; left: 25%; z-index: 5; filter: drop-shadow(1px 2px 1px 3px #aaa); } #card2 .caption { text-align: center; position: absolute; top: 60%; left: 50%; transform:translate(-50%,-50%); z-index: 10; } #card2 .caption .text { color: #fff; font-size: 3rem; margin-bottom: 1.5rem; } #card2 .caption .action { padding-left: 2rem; padding-right: 2rem; } /* ======================================= demo css ========================================*/ /*=== for demo only ===*/ .demo-title { text-align: center; color: #808080; padding-top: 5vh; padding-bottom: 5vh; } .card { height: 400px; width: 400px; margin: 25px; float: left; } .demo-more { text-align: center; color: #808080; padding-top: 10vh; padding-bottom: 10vh; } .demo-more i { color: #696969; } a { text-decoration: underline; color: #696969; font-weight: 600; } a:hover { color: #696969; } body { overflow-x: hidden; }
// contribute on github : https://github.com/alphadsy/alpha-ui // credits: // bootstrap // font-awesome // stocksnap

Related: See More

Datepicker
Bootstrap4 navigation border animation
bootstrap 4 card
Card Styles

Questions / Comments: