Get To Know Your Manager - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="your-manager">
    <div class="your-manager__inner">
        <div class="your-manager__title">
            <h2 class="component-title">Get To Know Your Manager</h2>
        </div>

        <div class="your-manager__main">
            <div class="your-manager__mgr">
                <!-- 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 -->
            </div>

            <div class="your-manager__actions">
                <a href="#" class="btn btn-primary" onclick="alert('Open Public Profile'); return false;">Check out your manager's profile</a>
            </div>
        </div>

        <div class="your-manager__sidebar">
            <div class="your-manager__card">
                <img src="/images/photos/3.jpg" alt="" class="img-responsive" />

                <div class="your-manager__card-body">
                    <h5 class="your-manager__card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                    <div class="your-manager__card-content">
                        <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                    </div>

                    <div class="your-manager__card-actions">
                        <a href="#"
                            >Lorem ipsum dolor sit
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.your-manager {
  background-color: $color-base-grey;
  padding: 4rem 0;
  margin-bottom: 4.8rem;

  @media (min-width: $breakpoint-desktop) {
    .your-manager__title {
      width: 25%;
    }

    .your-manager__main {
      width: 40%;
    }

    .your-manager__sidebar {
      width: 35%;
    }
  }
}

.your-manager__inner {
  max-width: 1170px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
  }
}

.your-manager__title {
  padding: 0 2.4rem;
}

.your-manager__main {
  @include boxShadow(2);
  border-top: 4px solid $color-blue-medium;
  background-color: $color-base-white;
  display: flex;
  flex-direction: column;
}

.your-manager__mgr {
  padding: 2.4rem;
  flex: 1;
  overflow: hidden;
}

.your-manager__actions {
  background-color: $color-base-grey;
  text-align: center;
  padding: 1.2rem;
}

.your-manager__sidebar {
  padding: 0 4rem;
}

.your-manager__card {
  max-width: 28rem;
  margin: 4rem auto 0;

  @media (min-width: $breakpoint-desktop) {
    margin-top: 0;
  }
}

.your-manager__card-body {
  background-color: $color-base-white;
  padding: 2.4rem;
}

.your-manager__card-title {
  @include typeBody(true);
  margin: 0 0 1.2rem;
}

.your-manager__card-actions {
  font-weight: bold;
}