Profile Card - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<!-- Profile Card - XLarge -->
<div class="profile-card profile-card--xlarge">
    <div class="profile-card__media">
        <img src="https://via.placeholder.com/112x112" alt="" class="profile-card__img" />
    </div>
    <div class="profile-card__content">
        <div class="profile-card__group">
            <div class="profile-card__field profile-card__field--xxlarge">Name<br />Surname</div>
            <div class="profile-card__field profile-card__field--xlarge">Title</div>
        </div>
        <div class="profile-card__group profile-card__contacts">
            <div class="profile-card__field profile-card__field--large">
                <i class="fa fa-envelope text-primary"></i>
                <a href="#">name@email.com</a>
            </div>
            <div class="profile-card__field profile-card__field--large">
                <i class="fa fa-phone text-primary"></i>
                555-555-5555
            </div>
        </div>
    </div>
</div>
<!-- /Profile Card - XLarge -->

<!-- Profile Card - Large -->
<div class="profile-card">
    <div class="profile-card__media">
        <img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img" />
    </div>
    <div class="profile-card__content">
        <div class="profile-card__group">
            <div class="profile-card__field profile-card__field--large">Name Surname</div>
            <div class="profile-card__field">Title</div>
            <div class="profile-card__field">BU/Division</div>
        </div>
        <div class="profile-card__group profile-card__contacts">
            <div class="profile-card__field profile-card__field--small">
                <i class="fa fa-envelope text-primary"></i>
                <a href="#">name@email.com</a>
            </div>
            <div class="profile-card__field profile-card__field--small">
                <i class="fa fa-phone text-primary"></i>
                555-555-5555
            </div>
        </div>
    </div>
</div>
<!-- /Profile Card - Large -->

<!-- Profile Card - Large/Square -->
<div class="profile-card">
    <div class="profile-card__media">
        <img src="https://via.placeholder.com/72x72" alt="" class="profile-card__img is-square" />
    </div>
    <div class="profile-card__content">
        <div class="profile-card__group">
            <div class="profile-card__field profile-card__field--large">Name Surname</div>
            <div class="profile-card__field">Title</div>
            <div class="profile-card__field">BU/Division</div>
        </div>
    </div>
</div>
<!-- /Profile Card - Large/Square -->

<!-- Profile Card - Small -->
<div class="profile-card profile-card--small">
    <div class="profile-card__media">
        <img src="/images/placeholder/40x40.png" alt="" class="profile-card__img" />
    </div>
    <div class="profile-card__content">
        <div class="profile-card__group">
            <div class="profile-card__field profile-card__field--large">Name Surname</div>
            <div class="profile-card__field">Title</div>
        </div>
        <div class="profile-card__group profile-card__contacts">
            <div class="profile-card__field profile-card__field--small">
                <i class="fa fa-envelope text-primary"></i>
                <a href="#">name@email.com</a>
            </div>
            <div class="profile-card__field profile-card__field--small">
                <i class="fa fa-phone text-primary"></i>
                555-555-5555
            </div>
        </div>
    </div>
</div>
<!-- /Profile Card - Small -->

.profile-card {
  display: flex;
  align-items: center;

  &.profile-card--xlarge {
    align-items: flex-start;
  }
}

.profile-card__img {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;

  &.is-square {
    border-radius: 0;
  }
}

.profile-card--small .profile-card__img {
  height: 4rem;
  width: 4rem;
}

.profile-card--xlarge .profile-card__img {
  height: 11.2rem;
  width: 11.2rem;
}

.profile-card__content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.profile-card--small .profile-card__content {
  flex-direction: row;
}

.profile-card__contacts {
  display: flex;
  flex-wrap: wrap;

  .profile-card--small &,
  .profile-card--xlarge & {
    flex-direction: column;
  }

  .profile-card--xlarge & {
    margin-top: 2.4rem;
  }
}

.profile-card__field {
  @include typeCaption;
  margin: 0.4rem;
  text-overflow: ellipsis;

  &.profile-card__field--xxlarge {
    @include typeDisplay(true);
  }

  &.profile-card__field--xlarge {
    @include typeTitle(true);
  }

  &.profile-card__field--large {
    @include typeBody(true);
  }

  &.profile-card__field--small {
    @include typeSmall;
  }
}

.profile-card__group {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}