Let us know what you think about the new Building Blocks

Card Profile Stats

By Bryan Lewis

F6
#
How do I use This?

A card profile stats container that shows and hide addition bio information.

HTML
<div class="card-profile-stats">
  <div class="card-profile-stats-intro">
    <img class="card-profile-stats-intro-pic" src="https://pbs.twimg.com/profile_images/732634911761260544/OxHbNdTF.jpg" alt="profile-image" />
    <div class="card-profile-stats-intro-content">
      <h3>Joe Smith</h3>
      <p>Joined Jan.16th 2017</small></p>
    </div> <!-- /.card-profile-stats-intro-content -->
  </div> <!-- /.card-profile-stats-intro -->

  <hr />

  <div class="card-profile-stats-container">
    <div class="card-profile-stats-statistic">
      <span class="stat">25</span>
      <p>posts</p>
    </div> <!-- /.card-profile-stats-statistic -->
    <div class="card-profile-stats-statistic">
      <span class="stat">125</span>
      <p>followers</p>
    </div> <!-- /.card-profile-stats-statistic -->
    <div class="card-profile-stats-statistic">
      <span class="stat">88</span>
      <p>likes</p>
    </div> <!-- /.card-profile-stats-statistic -->
  </div> <!-- /.card-profile-stats-container -->

  <div class="card-profile-stats-more">
    <p class="card-profile-stats-more-link"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a></p>
    <div class="card-profile-stats-more-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem libero fugit, pariatur maxime! Optio enim, deserunt quia molestiae fugiat delectus, dolore et esse nostrum, quod autem necessitatibus fugit soluta repellendus.
      </p>
    </div> <!-- /.card-profile-stats-more-content -->
  </div> <!-- /.card-profile-stats-more -->
</div> <!-- /.card-profile-stats -->

.card-profile-stats {
  border: 1px solid $medium-gray;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  background: $white;

  .card-profile-stats-intro {
    text-align: center;

    .card-profile-stats-intro-pic {
      border-radius: 50%;
      margin: 0 0 1.25rem;
    } // .card-profile-stats-intro-pic

    .card-profile-stats-intro-content {
      p:last-child {
        margin: 0;
      } // p:last-child
    } // .card-profile-stats-intro-content
  } // .card-profile-stats-intro

  .card-profile-stats-container {
    text-align: center;

    .card-profile-stats-statistic {
      margin: 0 0 1.25rem;

      p:last-child {
        margin: 0;
      }
    } // .card-profile-stats-statistic
  } // .card-profile-stats-container

  .card-profile-stats-more {
    .card-profile-stats-more-link {
      margin: 0;
      text-align: center;
      font-size: 1.5rem;
      color: $body-font-color;
      padding: 0.5rem;
      cursor: pointer;
    } // .card-profile-stats-more-link

    .card-profile-stats-more-content {
      display: none;
    } // .card-profile-stats-more-content
  } // .card-profile-stats-more
} // .card-profile-stats



/* Large and up */
@include breakpoint(large) {
  .card-profile-stats {
    .card-profile-stats-intro {
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: left;

      .card-profile-stats-intro-pic {
        margin: 0 1.25rem 0 0;
        max-width: 250px;
      } // .card-profile-stats-intro-pic
    } // .card-profile-stats-intro

    .card-profile-stats-container {
      display: flex;
      justify-content: space-around;
    } // .card-profile-stats-container
  } // .card-profile-stats

} // media query - large & up


.card-profile-stats {
  border: 1px solid #cacaca;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  background: #fefefe;
}

.card-profile-stats .card-profile-stats-intro {
  text-align: center;
}

.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
  border-radius: 50%;
  margin: 0 0 1.25rem;
}

.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-content p:last-child {
  margin: 0;
}

.card-profile-stats .card-profile-stats-container {
  text-align: center;
}

.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic {
  margin: 0 0 1.25rem;
}

.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic p:last-child {
  margin: 0;
}

.card-profile-stats .card-profile-stats-more .card-profile-stats-more-link {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: #0a0a0a;
  padding: 0.5rem;
  cursor: pointer;
}

.card-profile-stats .card-profile-stats-more .card-profile-stats-more-content {
  display: none;
}


@media print, screen and (min-width: 64em) {
  .card-profile-stats .card-profile-stats-intro {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    text-align: left;
  }
  .card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
    margin: 0 1.25rem 0 0;
    max-width: 250px;
  }
  .card-profile-stats .card-profile-stats-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
}

JS
// more click
$('.card-profile-stats-more-link').click(function(e){
  e.preventDefault();
  if ( $(".card-profile-stats-more-content").is(':hidden') ) {
    $('.card-profile-stats-more-link').find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
  } else {
    $('.card-profile-stats-more-link').find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
  }
  $(this).next('.card-profile-stats-more-content').slideToggle();
});