6.3.0, 6.3.1
Install with Foundation CLI
A card built using CSS Grid with an image, title, author, likes/favorites and other detail.
<div class="card"> <img class="card-img" src="https://placehold.it/350x300" alt="header" /> <div class="card-info"> <h1 class="card-title">Card Title</h1> <div class="card-icon">6</div> <p class="card-author">Author Name</p> <p class="card-stats">6 <img src="https://placehold.it/20" alt="hi" /> 6 <img src="https://placehold.it/20" alt="hi" /></p> </div> </div>
.card { width: 350px; } .card-info { padding: 1rem; display: grid; grid-template-rows: 1fr 2.5rem; grid-template-columns: 3fr 1fr; } .card-title { font-size: 2rem; grid-row: 1 / 2; grid-column: 1 / 2; } .card-icon { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: right; width: 30px; height: 30px; background-color: LightBlue; border-radius: 100%; display: grid; justify-items: center; align-items: center; } .card-author { grid-row: 2 / 3; grid-column: 1 / 2; align-self: bottom; } .card-stats { align-self: bottom; justify-self: right; }
.card { width: 350px; } .card-info { padding: 1rem; display: -ms-grid; display: grid; -ms-grid-rows: 1fr 2.5rem; grid-template-rows: 1fr 2.5rem; -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; } .card-title { font-size: 2rem; grid-row: 1 / 2; grid-column: 1 / 2; } .card-icon { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: right; width: 30px; height: 30px; background-color: LightBlue; border-radius: 100%; display: -ms-grid; display: grid; -ms-grid-column-align: center; justify-items: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .card-author { grid-row: 2 / 3; grid-column: 1 / 2; -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; } .card-stats { -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; justify-self: right; }
By
John Cheng
