<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
$('.js-checked').on('click', function() {
    $(this).closest('.card__footer__icon').toggleClass('is-highlight');
})
Run Pen

External CSS

  1. https://codepen.io/druArt/pen/JvEjXg.scss

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://use.fontawesome.com/edbaaf28b3.js
  3. https://codepen.io/druArt/pen/JvEjXg.js