CodePen Embed - basis-flex-cards

<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');
})

This Pen is owned by dru on CodePen.

See more by @druArt on CodePen

External CSS

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

External CSS

External JavaScript