Profile Card with Action Icons

By Harry Manchanda

F6 Line Created with Sketch.
about social icons profile card
How do I use This?

Profile Card great for social sites user profile. Use the grid to size the cards.

HTML
<div class="card profile-card-action-icons">
  <div class="card-section">
    <div class="profile-card-header">
      <div class="profile-card-avatar">
        <img class="avatar-image" src="https://i.imgur.com/3AeQRbR.jpg" alt="Harry Manchanda">
      </div>
      <div class="profile-card-author">
        <h5 class="author-title">Harry Manchanda</h5>
        <p class="author-description">Front End Web Developer</p>
      </div>
    </div>
    <div class="profile-card-about">
      <h5 class="about-title separator-left">About Me</h5>
      <p class="about-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet autem eveniet nulla quae ullam sit iure voluptatum, nesciunt voluptas perferendis, minus natus in quaerat?
      </p>
      <div class="row about-skills">
        <div class="small-6 columns">
          <ul class="arrow">
            <li>Coding</li>
            <li>Cricket</li>
            <li>Enjoying</li>
          </ul>
        </div>
        <div class="small-6 columns">
          <ul class="arrow">
            <li>Maths</li>
            <li>Dancing</li>
            <li>Smiling</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="profile-card-action">
      <div class="action-area">
        <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Like Harry Profile">
          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
          <span class="show-for-sr">Like Harry Profile</span>
        </a>
      </div>
      <div class="action-area">
        <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Comment on Harry Profile">
          <i class="fa fa-comments-o" aria-hidden="true"></i>
          <span class="show-for-sr">Comment on Harry Profile</span>
        </a>
      </div>
      <div class="action-area">
        <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Add Harry as a Friend">
          <i class="fa fa-user-plus" aria-hidden="true"></i>
          <span class="show-for-sr">Add Harry as a Friend</span>
        </a>
      </div>
      <div class="action-area">
        <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Send Harry a Gift">
          <i class="fa fa-gift" aria-hidden="true"></i>
          <span class="show-for-sr">Send Harry a Gift</span>
        </a>
      </div>
      <div class="action-area">
        <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Block Harry!">
          <i class="fa fa-ban" aria-hidden="true"></i>
          <span class="show-for-sr">Block Harry!</span>
        </a>
      </div>
    </div>
  </div>
</div>


$profile-card-about-text-transform: uppercase;
$profile-card-about-separator-width: 3rem;
$profile-card-about-separator-thickness: 0.125rem;

.profile-card-action-icons {
  background-color: $white;
  font-weight: 400;
  margin-bottom: 1.6rem;
  border-radius: 0.125rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0, 0.18), 0 0.125rem 2px rgba(0,0,0, 0.36);

  .card-section {
    background-color: inherit;
    padding: 0.5rem 0 0;

    .profile-card-header,
    .profile-card-about {
      border-bottom: .0625rem solid $medium-gray;
      padding: 0.7rem 1rem;
    }

    .profile-card-header {
      display: flex;
      align-items: flex-start;

      .profile-card-avatar {
        margin-right: 0.5rem;

        .avatar-image {
          border-radius: 50%;
          width: rem-calc(60);
          height: rem-calc(60);
        }
      }

      .profile-card-author {
        flex: 1 0 0;
        margin-top: 0.3rem;
        padding-bottom: 0;

        .author-title,
        .author-description {
          margin-bottom: 0;
        }

        .author-title {
          color: $black;
        }

        .author-description {
          color: $dark-gray;
          font-size: 0.9em;
        }
      }
    }

    .profile-card-about {
      .about-title {
        text-transform: $profile-card-about-text-transform;
      }

      .separator-left {
        text-align: left;
        @include clearfix;

        &::after {
          position: relative;
          width: $profile-card-about-separator-width;
          border-bottom: $profile-card-about-separator-thickness solid $primary-color;
          margin: 0.3rem auto 0;
          margin-left: 0;
        }
      }

      .about-content {
        margin-bottom: 0;
      }

      .about-skills {
        margin-top: 0.6rem;

        ul.arrow {
          list-style-type: none;
          padding-left: 0;
          margin-left: 0;
          margin-bottom: 0;

          li {
            &:before {
              content: '\f006';
              font-family: 'FontAwesome';
              float: left;
              color: $primary-color;
              margin-right: 0.5rem;
            }
          }
        }
      }
    }

    .profile-card-action {
      display: flex;

      .action-area {
        width: 20%;
        border-right: 0.0625rem solid $medium-gray;
        text-align: center;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;

        &:last-of-type {
          border-right: none;
        }

        .action-anchor {
          &.has-tip {
            border-bottom: none;
            cursor: pointer;
          }

          .fa {
            color: $primary-color;
          }
        }
      }
    }
  }
}



.profile-card-action-icons {
  background-color: #fefefe;
  font-weight: 400;
  margin-bottom: 1.6rem;
  border-radius: 0.125rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.18), 0 0.125rem 2px rgba(0, 0, 0, 0.36);
}

.profile-card-action-icons .card-section {
  background-color: inherit;
  padding: 0.5rem 0 0;
}

.profile-card-action-icons .card-section .profile-card-header,
.profile-card-action-icons .card-section .profile-card-about {
  border-bottom: 0.0625rem solid #cacaca;
  padding: 0.7rem 1rem;
}

.profile-card-action-icons .card-section .profile-card-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-avatar {
  margin-right: 0.5rem;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-avatar .avatar-image {
  border-radius: 50%;
  width: 3.75rem;
  height: 3.75rem;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  margin-top: 0.3rem;
  padding-bottom: 0;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-title,
.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-description {
  margin-bottom: 0;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-title {
  color: #0a0a0a;
}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-description {
  color: #8a8a8a;
  font-size: 0.9em;
}

.profile-card-action-icons .card-section .profile-card-about .about-title {
  text-transform: uppercase;
}

.profile-card-action-icons .card-section .profile-card-about .separator-left {
  text-align: left;
}

.profile-card-action-icons .card-section .profile-card-about .separator-left::before, .profile-card-action-icons .card-section .profile-card-about .separator-left::after {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.profile-card-action-icons .card-section .profile-card-about .separator-left::after {
  clear: both;
}

.profile-card-action-icons .card-section .profile-card-about .separator-left::after {
  position: relative;
  width: 3rem;
  border-bottom: 0.125rem solid #1779ba;
  margin: 0.3rem auto 0;
  margin-left: 0;
}

.profile-card-action-icons .card-section .profile-card-about .about-content {
  margin-bottom: 0;
}

.profile-card-action-icons .card-section .profile-card-about .about-skills {
  margin-top: 0.6rem;
}

.profile-card-action-icons .card-section .profile-card-about .about-skills ul.arrow {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 0;
}

.profile-card-action-icons .card-section .profile-card-about .about-skills ul.arrow li:before {
  content: '\f006';
  font-family: 'FontAwesome';
  float: left;
  color: #1779ba;
  margin-right: 0.5rem;
}

.profile-card-action-icons .card-section .profile-card-action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.profile-card-action-icons .card-section .profile-card-action .action-area {
  width: 20%;
  border-right: 0.0625rem solid #cacaca;
  text-align: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.profile-card-action-icons .card-section .profile-card-action .action-area:last-of-type {
  border-right: none;
}

.profile-card-action-icons .card-section .profile-card-action .action-area .action-anchor.has-tip {
  border-bottom: none;
  cursor: pointer;
}

.profile-card-action-icons .card-section .profile-card-action .action-area .action-anchor .fa {
  color: #1779ba;
}
JS

Similar Building Blocks

containers

Dashboard Number Card

F6
by Kevin Ball
Page 1 Created with Sketch.
containers

Sticky Footer with CSS Only

F6
by Rafi
Page 1 Created with Sketch.
containers

Block List

F6
by Kevin Ball
Page 1 Created with Sketch.