People you might know

By Harry Manchanda

F6
#
social icons people containers button
How do I use This?

Section for People you might know. This includes a Header, Users profile picture, name and an action button to add as a friend

HTML
<div class="people-you-might-know">
  <div class="add-people-header">
    <h6 class="header-title">
      People You Might Know
    </h6>
  </div>
  <div class="row add-people-section">
    <div class="small-12 medium-6 columns about-people">
      <div class="about-people-avatar">
        <img class="avatar-image" src="https://i.imgur.com/UPVxPjb.jpg" alt="Kishore Kumar">
      </div>
      <div class="about-people-author">
        <p class="author-name">
          Kishore Kumar
        </p>
        <p class="author-location">
          <i class="fa fa-map-marker" aria-hidden="true"></i>
          Mumbai, India
        </p>
        <p class="author-mutual">
          <strong>Shahrukh Khan</strong> is a mutual friend.
        </p>
      </div>    
    </div>
    <div class="small-12 medium-6 columns add-friend">
      <div class="add-friend-action">
        <button class="button primary small">
          <i class="fa fa-user-plus" aria-hidden="true"></i>
          Add Friend
        </button>
        <button class="button secondary small">
          <i class="fa fa-user-times" aria-hidden="true"></i>
          Ignore
        </button>
      </div>
    </div>
  </div>
  <div class="row add-people-section">
    <div class="small-12 medium-6 columns about-people">
      <div class="about-people-avatar">
        <img class="avatar-image" src="https://i.imgur.com/GHeazQ2.jpg" alt="Kishore Kumar">
      </div>
      <div class="about-people-author">
        <p class="author-name">
          Barack Obama
        </p>
        <p class="author-location">
          <i class="fa fa-map-marker" aria-hidden="true"></i>
          Hawaii, United States
        </p>
        <p class="author-mutual">
          <strong>Hilary Clinton</strong> is a mutual friend.
        </p>
      </div>    
    </div>
    <div class="small-12 medium-6 columns add-friend">
      <div class="add-friend-action">
        <button class="button primary small">
          <i class="fa fa-user-plus" aria-hidden="true"></i>
          Add Friend
        </button>
        <button class="button secondary small">
          <i class="fa fa-user-times" aria-hidden="true"></i>
          Ignore
        </button>
      </div>
    </div>
  </div>
  <div class="row add-people-section">
    <div class="small-12 medium-6 columns about-people">
      <div class="about-people-avatar">
        <img class="avatar-image" src="https://i.imgur.com/SytPzuC.jpg" alt="Kishore Kumar">
      </div>
      <div class="about-people-author">
        <p class="author-name">
          Harry Manchanda
        </p>
        <p class="author-location">
          <i class="fa fa-map-marker" aria-hidden="true"></i>
          New Delhi, India
        </p>
        <p class="author-mutual">
          <strong>Rafi Benkual</strong> is a mutual friend.
        </p>
      </div>    
    </div>
    <div class="small-12 medium-6 columns add-friend">
      <div class="add-friend-action">
        <button class="button primary small">
          <i class="fa fa-user-plus" aria-hidden="true"></i>
          Add Friend
        </button>
        <button class="button secondary small">
          <i class="fa fa-user-times" aria-hidden="true"></i>
          Ignore
        </button>
      </div>
    </div>
  </div>
  <div class="view-more-people">
    <p class="view-more-text">
      <a href="#" class="view-more-link">View More..</a>
    </p>
  </div>
</div>


.people-you-might-know {
  background-color: $white;
  padding: 1rem 0 0;
  border: 1px solid $medium-gray;
  box-shadow: 0 0 rem-calc(50) rgba(0,0,0, 0.18);

  .add-people-header {
    padding: 0 0.9375rem;
    border-bottom: 0.0625rem solid $medium-gray;

    .header-title {
      font-weight: bold;
    }
  }

  .add-people-section {
    margin: 1rem 0 0;
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid $medium-gray;

    .about-people {
      display: flex;
      align-items: flex-start;

      .about-people-avatar {
        padding-right: 0.5rem;
        padding-left: 0;

        .avatar-image {
          width: rem-calc(80);
          height: rem-calc(80);
          border-radius: 50%;
          border: 0.0625rem solid $medium-gray;
        }
      }

      .about-people-author {
        flex: 1 0 0;

        .author-name {
          color: $black;
          margin: 0.375rem 0 0;
        }

        .author-location,
        .author-mutual {
          color: $dark-gray;
          margin-bottom: 0;
          font-size: 0.85em;
        }
      }
    }

    .add-friend {
      display: flex;
      align-items: center;
      justify-content: center;

      @include breakpoint(small only) {
        justify-content: flex-start;
      }

      .add-friend-action {
        margin-top: 0.7rem;
      }
    }
  }

  .view-more-people {
    margin: .7rem 0;

    .view-more-text {
      margin-bottom: 0;
      text-align: center;

      .view-more-link {
        color: $primary-color;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }
  }
}



.people-you-might-know {
  background-color: #fefefe;
  padding: 1rem 0 0;
  border: 1px solid #cacaca;
  box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.18);
}

.people-you-might-know .add-people-header {
  padding: 0 0.9375rem;
  border-bottom: 0.0625rem solid #cacaca;
}

.people-you-might-know .add-people-header .header-title {
  font-weight: bold;
}

.people-you-might-know .add-people-section {
  margin: 1rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #cacaca;
}

.people-you-might-know .add-people-section .about-people {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.people-you-might-know .add-people-section .about-people .about-people-avatar {
  padding-right: 0.5rem;
  padding-left: 0;
}

.people-you-might-know .add-people-section .about-people .about-people-avatar .avatar-image {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 0.0625rem solid #cacaca;
}

.people-you-might-know .add-people-section .about-people .about-people-author {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.people-you-might-know .add-people-section .about-people .about-people-author .author-name {
  color: #0a0a0a;
  margin: 0.375rem 0 0;
}

.people-you-might-know .add-people-section .about-people .about-people-author .author-location,
.people-you-might-know .add-people-section .about-people .about-people-author .author-mutual {
  color: #8a8a8a;
  margin-bottom: 0;
  font-size: 0.85em;
}

.people-you-might-know .add-people-section .add-friend {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 39.9375em) {
  .people-you-might-know .add-people-section .add-friend {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.people-you-might-know .add-people-section .add-friend .add-friend-action {
  margin-top: 0.7rem;
}

.people-you-might-know .view-more-people {
  margin: .7rem 0;
}

.people-you-might-know .view-more-people .view-more-text {
  margin-bottom: 0;
  text-align: center;
}

.people-you-might-know .view-more-people .view-more-text .view-more-link {
  color: #1779ba;
}

.people-you-might-know .view-more-people .view-more-text .view-more-link:hover, .people-you-might-know .view-more-people .view-more-text .view-more-link:focus {
  text-decoration: underline;
}
JS

Similar Building Blocks

containers

Basic Card

F6
by ZURB
containers

Product Details

F6
by Kevin
containers

Product Card

F6
by Kevin