Card Profile Stats

By Bryan Lewis

content js show hide interaction card profile dashboard

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

// 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();
});

Card Profile Stats

By Bryan Lewis

Travel Feature Card

Block List

CSS Masonry Grid

Card Profile Stats

By Bryan Lewis

Similar Building Blocks

Travel Feature Card

Block List

CSS Masonry Grid