<svg style="display: none;">
<g id="image-icon">
<rect x="15.527" y="15.482" style="fill:none;stroke:#B8B8BE;stroke-width:8;stroke-miterlimit:10;opacity:0.2" width="370.945" height="177.184"/>
<polygon style="fill:#B8B8BE;opacity:0.2" points="96,163.074 168.625,64.574 222.026,129.76 246.5,109.074 306,163.074 "/>
<circle style="fill:#B8B8BE;opacity:0.2" cx="278.5" cy="68.074" r="32"/>
</g>
</svg>
<h1 class="pen-title pen-title--default">Card Flex</br><span>using flexbox properties</span></h1>
<div class="global-flex">
<div class="[ flex-item ] [ flex-item--lg1of1 flex-item--md1of2 flex-item--md1of3 flex-item--sm1of4 ]">
<div class="card">
<div class="[ card__img ]">
<a href="#" class="card__img-link">
<svg class="svg-scalable" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402px" height="207.324px" viewBox="0 0 402 207.324" style="enable-background:new 0 0 402 207.324;" xml:space="preserve">
<use class="image-icon" xlink:href="#image-icon" x="0" y="0"/>
</svg>
</a>
</div>
<div class="card__content">
<h3 class="card__title">Card Title</h3>
<h4 class="card__subtitle">Card Subtitle</h4>
<p class="card__text">card description (max 20 characters)</p>
</div>
<div class="card__footer">
<span class="[ card__footer__text ] [ card__text--left ]">
<i class="[ card__footer__icon ] [ fa fa-share-alt ]"></i>
340
<i class="[ card__footer__icon ] [ fa fa-eye ]"></i>
2002
</span>
<span class="[ card__footer__text ] [ card__text--right ]">
<input type="radio" name="one" id="one-first"><label class="[ fa fa-star ]" for="one-first"></label>
<input type="radio" name="one" id="one-second"><label class="[ fa fa-star ]" for="one-second"></label>
<input type="radio" name="one" id="one-third"><label class="[ fa fa-star ]" for="one-third"></label>
</span>
</div>
</div>
</div><!-- end_card -->
<div class="[ flex-item ] [ flex-item--lg1of1 flex-item--md1of2 flex-item--md1of3 flex-item--sm1of4 ]">
<div class="card">
<div class="[ card__img ]">
<a href="#" class="card__img-link">
<svg class="svg-scalable" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402px" height="207.324px" viewBox="0 0 402 207.324" style="enable-background:new 0 0 402 207.324;" xml:space="preserve">
<use class="image-icon" xlink:href="#image-icon" x="0" y="0"/>
</svg>
</a>
</div>
<div class="card__content">
<h3 class="card__title">Card Title</h3>
<h4 class="card__subtitle">Card Subtitle</h4>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quis quasi exercitationem ullam pariatur fuga autem ratione explicabo quia, dolorum.</p>
</div>
<div class="card__footer">
<span class="[ card__footer__text ] [ card__text--left ]">
<i class="[ card__footer__icon ] [ fa fa fa-share-alt ]"></i>
3
<i class="[ card__footer__icon ] [ fa fa-eye ]"></i>
260
</span>
<span class="[ card__footer__text ] [ card__text--right ]">
<input type="radio" name="two" id="two-first"><label class="[ fa fa-star ]" for="two-first"></label>
<input type="radio" name="two" id="two-second"><label class="[ fa fa-star ]" for="two-second"></label>
<input type="radio" name="two" id="two-third"><label class="[ fa fa-star ]" for="two-third"></label>
</span>
</div>
</div>
</div><!-- end_card -->
<div class="[ flex-item ] [ flex-item--lg1of1 flex-item--md1of2 flex-item--md1of3 flex-item--sm1of4 ]">
<div class="card">
<div class="[ card__img ]">
<a href="#" class="card__img-link">
<svg class="svg-scalable" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402px" height="207.324px" viewBox="0 0 402 207.324" style="enable-background:new 0 0 402 207.324;" xml:space="preserve">
<use class="image-icon" xlink:href="#image-icon" x="0" y="0"/>
</svg>
</a>
</div>
<div class="card__content">
<h3 class="card__title">Card Title</h3>
<h4 class="card__subtitle">Card Subtitle</h4>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="card__footer">
<span class="[ card__footer__text ] [ card__text--left ]">
<i class="[ card__footer__icon ] [ fa fa fa-share-alt ]"></i>
25
<i class="[ card__footer__icon ] [ fa fa-eye ]"></i>
21
</span>
<span class="[ card__footer__text ] [ card__text--right ]">
<input type="radio" name="three" id="three-first"><label class="[ fa fa-star ]" for="three-first"></label>
<input type="radio" name="three" id="three-second"><label class="[ fa fa-star ]" for="three-second"></label>
<input type="radio" name="three" id="three-third"><label class="[ fa fa-star ]" for="three-third"></label>
</span>
</div>
</div>
</div><!-- end_card -->
<div class="[ flex-item ] [ flex-item--lg1of1 flex-item--md1of2 flex-item--md1of3 flex-item--sm1of4 ]">
<div class="card">
<div class="[ card__img ]">
<a href="#" class="card__img-link">
<svg class="svg-scalable" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402px" height="207.324px" viewBox="0 0 402 207.324" style="enable-background:new 0 0 402 207.324;" xml:space="preserve">
<use class="image-icon" xlink:href="#image-icon" x="0" y="0"/>
</svg>
</a>
</div>
<div class="card__content">
<h3 class="card__title">Card Title</h3>
<h4 class="card__subtitle">Card Subtitle</h4>
<p class="card__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis possimus ad ipsam itaque minima facilis, maxime est odio dignissimos perferendis!</p>
</div>
<div class="card__footer">
<span class="[ card__footer__text ] [ card__text--left ]">
<i class="[ card__footer__icon ] [ fa fa fa-share-alt ]"></i>
34
<i class="[ card__footer__icon ] [ fa fa-eye ]"></i>
221
</span>
<span class="[ card__footer__text ] [ card__text--right ]">
<input type="radio" name="four" id="four-first"><label class="[ fa fa-star ]" for="four-first"></label>
<input type="radio" name="four" id="four-second"><label class="[ fa fa-star ]" for="four-second"></label>
<input type="radio" name="four" id="four-third"><label class="[ fa fa-star ]" for="four-third"></label>
</span>
</div>
</div>
</div><!-- end_card -->
</div>
/* reset */
*,
*:after,
*:before {
box-sizing: border-box;
}
.svg-scalable {
display: block;
width: 100%;
max-height: 100%;
height: auto;
margin: 0 auto;
transition: transform 0.4s ease-in-out;
}
body {
margin: 0;
padding: 0;
background-color: #252527;
background-image:
url("https://druart.github.io/web/images/illustration/bckgrd-05.png");
background-position: -30px -10px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
.pen-title {
margin: 0;
padding: 0;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
&--default {
padding-top: 20px;
padding-bottom:30px;
background-color: #222;
color: #999;
text-align: center;
}
span {
font-size: 0.6em;
font-weight: lighter;
}
}
/**
*demo card-flex
*/
$minWidth: 300px;
$maxWidth: $minWidth * 4;
.global-flex {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: $maxWidth;
margin: 20px auto;
}
.flex-item {
display: flex;
justify-content: space-around;
width: 100%;
padding: 10px;
font-size: 1rem;
}
/* flex_card */
.card {
display: flex;
flex-direction: column;
width: 100%;
background-color: #2f2f31;
border-radius: 2px;
border: 5px solid #2f2f31;
box-shadow: 2px 2px 3px rgba(0,0,0,0.28);
animation: fadeIn 0.8s cubic-bezier(0.33, 0.11, 0.08, 1.45);
}
.card__img {
display: block;
height: auto;
justify-content: center;
align-items: center;
background-color: #222;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
.card__img-link {
&:hover .svg-scalable {
transform: scale(1.2);
transition: transform 0.6s ease-in-out;
}
}
.card__content {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
color: #ccc;
text-align: left;
}
.card__title,
.card__subtitle,
.card__text {
margin-left: 20px;
margin-right: 20px;
opacity: 0.8;
color: #999999;
font-family: 'Roboto', sans-serif;
}
.card__title {
margin-bottom: 10px;
font-size: 1.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 2px;
font-weight: 700;
}
.card__subtitle {
margin-top: 0;
font-size: 1.2em;
font-weight: 300;
}
.card__text {
font-weight: 300;
&--left {
text-align: left;
}
&--right {
text-align: right;
}
}
.card__footer {
display: flex;
margin-top: auto; /* can be used to keep this section restricted to the bottom, but it must be combined with flex-grow in card__content */
border-top: 1px solid #222;
padding: 10px 20px;
color: #222;
}
.card__footer__text {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
width: 50%;
font-size: 1em;
font-weight: lighter;
}
//.card__footer__icon {
// font-size: 1.2em;
// opacity: 0.8;
// cursor: pointer;
//
// &:hover {
// color: #ccc;
// }
//
// &.is-highlight {
// color: #fc5;
// }
//}
input {
display: none;
}
label {
font-size: 1.2em;
opacity: 0.8;
cursor: pointer;
color: #222;
}
.card__footer__text label:hover,
.card__footer__text label:hover ~ label {
color: #aaa;
}
.card__footer__text input:checked ~ label {
color: #fc5;
}
/**
*responsive
*/
@media screen and (max-width: 659px) {
.global-flex {
max-width: $minWidth;
}
.flex-item--lg1of1 {
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 999px) {
.global-flex {
max-width: $minWidth * 2;
}
.flex-item--md1of2 {
width: 50%;
}
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
.global-flex {
max-width: $minWidth * 3;
}
.flex-item--md1of3 {
width: 33%;
}
}
@media screen and (min-width: 1200px) {
.flex-item--sm1of4 {
width: 25%;
}
}
/**
*animate
*/
@keyframes fadeIn {
from {
opacity: 0;
transform: translate(100%, 0);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
View Compiled