Info Card With Labels

By Rafi

F6
#
content button card profile product social
How do I use This?

A fancy card great for a user profile, social media, or even a product. It has a skew effect and a place for an avatar image. This also used the Foundation Card component through Sass mixins.

HTML
<div class="card-user-profile">
  <img class="card-user-profile-img" src="https://images.pexels.com/photos/5439/earth-space.jpg?h=350&auto=compress&cs=tinysrgb" alt="picture of space" />
  <div class="card-user-profile-content card-section">
    <div class="card-user-profile-avatar">
      <img src="https://pbs.twimg.com/profile_images/422887689612820482/sZtHMJu5.png" alt="picture of yeti" />
    </div>
    <p class="card-user-profile-name">Abominable Snowman</p>
    <p class="card-user-profile-status">Yeti Web Designer</p>
    <p class="card-user-profile-info">The Yeti, once better known as the Abominable Snowman, is a mysterious bipedal creature said to live in the mountains of Asia. It sometimes leaves tracks in snow, but is also said to dwell below the Himalayan snow line.</p>
  </div>

  <div class="card-user-profile-actions">
    <a href="#" class="card-user-profile-button button hollow">Follow</a>
    <a href="#" class="card-user-profile-button button hollow secondary">More Info</a>
  </div>
</div>



$card-user-profile-bg: $card-background;
$card-user-profile-text-color: $body-font-color;

.card-user-profile {
  position: relative;
  z-index: 0;
  @include card-container($card-user-profile-bg, $card-user-profile-text-color, 1rem, $global-radius);

  &:hover {
    .card-user-profile-img {
      opacity: 1;
    }
  }
}

.card-user-profile-content {
  position: relative;

  &::before {
    position: absolute;
    content: '';
    top: rem-calc(-55);
    left: rem-calc(-30);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: rem-calc(55) 0 0 rem-calc(500);
    z-index: 0;
    border-color: transparent transparent transparent $card-user-profile-bg;
  }
}

.card-user-profile-actions {
  @include card-divider;
  background: $card-user-profile-bg;
  display: flex;
}

.card-user-profile-img {
  max-width: 100%;
  opacity: 0.85;
  transition: all 0.25s ease;
}

.card-user-profile-avatar {
  position: absolute;
  bottom: 100%;
  left: 1rem;
  z-index: 2;
  max-width: rem-calc(90);

  img {
    border-radius: 50%;
    box-shadow: 0 0 15px rgba($black, 0.3);
  }
}

.card-user-profile-name {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 1.5rem;
}

.card-user-profile-button {
  margin-bottom: 0;
  flex: 1 0 0;

  + .card-user-profile-button {
    margin-left: 1rem;
  }
}

.card-user-profile-info {
  font-size: 0.875rem;
  letter-spacing: 1px;
  opacity: 0.8;
}



.card-user-profile {
  position: relative;
  z-index: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 0;
  background: #fefefe;
  box-shadow: none;
  overflow: hidden;
  color: #0a0a0a;
}

.card-user-profile > :last-child {
  margin-bottom: 0;
}

.card-user-profile:hover .card-user-profile-img {
  opacity: 1;
}

.card-user-profile-content {
  position: relative;
}

.card-user-profile-content::before {
  position: absolute;
  content: '';
  top: -3.4375rem;
  left: -1.875rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.4375rem 0 0 31.25rem;
  z-index: 0;
  border-color: transparent transparent transparent #fefefe;
}

.card-user-profile-actions {
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  padding: 1rem;
  background: #e6e6e6;
  background: #fefefe;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.card-user-profile-actions > :last-child {
  margin-bottom: 0;
}

.card-user-profile-img {
  max-width: 100%;
  opacity: 0.85;
  transition: all 0.25s ease;
}

.card-user-profile-avatar {
  position: absolute;
  bottom: 100%;
  left: 1rem;
  z-index: 2;
  max-width: 5.625rem;
}

.card-user-profile-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

.card-user-profile-name {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 1.5rem;
}

.card-user-profile-button {
  margin-bottom: 0;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.card-user-profile-button + .card-user-profile-button {
  margin-left: 1rem;
}

.card-user-profile-info {
  font-size: 0.875rem;
  letter-spacing: 1px;
  opacity: 0.8;
}
JS

Similar Building Blocks

containers

Responsive Featured Section

F6
by Laurel Beyers
containers

Full Width Testimonial

F6
by Kevin Ball
containers

CSS Grid - Staggered Grid

F6
by John Cheng