Profile
This component elements which may affect an embedded demo. Open the
preview in a new tab
.
<!-- Demo buttons to trigger modals -->
<p>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#public-profile">Open PUBLIC profile</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#private-profile">Open PRIVATE profile</button>
</p>
<!-- PUBLIC Profile Modal -->
<div class="modal fade profile" id="public-profile" tabindex="-1" role="dialog" aria-labelledby="profile-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="profile-title">Professional Profile</h4>
</div>
<div class="modal-body">
<div class="profile__top">
<div class="profile__avatar-wrap">
<div class="profile__avatar">
<div class="profile__avatar-inner">
<img src="/images/placeholder/216x216.png" alt="" class="profile__image" />
</div>
<div class="profile__name">Name Surname</div>
</div>
</div>
<div class="profile__section">
<div class="profile__details">
<div>
Title:
<strong>Director</strong>
</div>
<div>
Pronouns:
<strong>He/Him</strong>
</div>
<div>
Division:
<strong>Paramount</strong>
</div>
<div class="profile__manager">
Manager:
<!-- 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">
<a href="#">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
<div>
<a href="#" class="btn btn-primary">Org Chart <img src="/images/icon-orgchart.svg" alt="" /></a>
</div>
</div>
</div>
<div class="profile__section profile__section--dark">
<div class="profile__actions">
<a href="#" class="btn btn-primary">Call Work Phone <img src="/images/icon-zoom.svg" alt="" /></a>
<a href="#" class="btn btn-primary"
>Send email
<img src="/images/icon-email.svg" alt="" />
</a>
<a href="#" class="btn btn-primary">Start Chat <img src="/images/icon-slack.svg" alt="" /></a>
</div>
</div>
</div>
<div class="profile__public">
<div class="row">
<div class="col-xs-12 col-sm-6 u-m-b-xl">
<h3 class="profile-section__title">Work Information</h3>
<table class="table profile-table u-m-b-0">
<tbody>
<tr>
<th class="profile-table__separator">Business email</th>
<td class="profile-table__separator">email@email.com</td>
</tr>
<tr>
<th>Work Location</th>
<td>
15th Floor - 7C<br />
1575 N Gower St.<br />
Los Angeles, CA 90028
</td>
</tr>
<tr>
<th>Work Model</th>
<td>Fully Onsite</td>
</tr>
<tr>
<th>Work Phone</th>
<td>555-555-5555</td>
</tr>
<tr>
<th class="profile-table__separator">Cell Phone</th>
<td class="profile-table__separator">Not available</td>
</tr>
<tr>
<th>Time zone</th>
<td>Pacific Standard Time (PST)</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6 u-m-b-xl">
<!-- Simulate valid form submit (return to 'view' mode) -->
<form id="demo-profile-form" name="demo-profile-form" action="" onSubmit="document.querySelector('#toggle-mode').click(); return false;">
<h3 class="profile-section__title">About me</h3>
<table class="table profile-table u-m-b-0">
<tbody>
<tr>
<th class="u-align-middle">LinkedIn <img src="/images/icon-linkedin.png" alt="" /></th>
<td>
<div class="profile-mode profile-mode--edit js-mode">
<a href="">https://www.linkedin.com/in/...</a>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table profile-table">
<tbody>
<tr>
<th>Employee Resource Groups</th>
</tr>
<tr>
<td>
<div class="text-muted">Want to add badges to your profile for the ERGs you participate in?</div>
</td>
</tr>
<tr>
<td>
<div class="profile-mode profile-mode--view js-mode">
<ul class="list-inline">
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /PUBLIC Profile Modal -->
<!-- PRIVATE Profile Modal -->
<div class="modal fade profile" id="private-profile" tabindex="-1" role="dialog" aria-labelledby="profile-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="profile-title">Professional Profile</h4>
</div>
<div class="modal-body">
<div class="profile__top">
<div class="profile__avatar-wrap">
<div class="profile__avatar">
<div class="profile__avatar-inner">
<img src="/images/placeholder/216x216.png" alt="" class="profile__image" />
<div class="profile__image-upload">
<label for="upload-image"><img src="/images/icon-camera.svg" alt="Upload file" /></label>
<input type="file" id="upload-image" class="hide" />
</div>
</div>
<div class="profile__name">Name Surname</div>
</div>
</div>
<div class="profile__section">
<a role="button" class="btn btn-link profile-tooltip" data-toggle="popover" data-placement="left" tabindex="0" data-trigger="focus" data-content="<p>Want to change your preferred name or pronouns?</p><p><a href='#' class='btn btn-info'>Make changes in SuccessFactors</a></p><p>Need to let HR know about a correction needed to data related to your title, division or manager? Talk to your manager for next steps.</p>" data-html="true">
<i class="fa fa-pencil"></i>
</a>
<div class="profile__details">
<div>
Title:
<strong>Director</strong>
</div>
<div>
Pronouns:
<strong>He/Him</strong>
</div>
<div>
Division:
<strong>Paramount</strong>
</div>
<div class="profile__manager">
Manager:
<!-- 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">
<a href="#">Name Surname</a>
</div>
<div class="profile-card__field">Title</div>
</div>
</div>
</div>
<!-- /Profile Card - Small -->
</div>
<div>
<a href="#" class="btn btn-primary">Org Chart <img src="/images/icon-orgchart.svg" alt="" /></a>
</div>
</div>
</div>
<div class="profile__section profile__section--dark">
<a href="#" class="btn profile-tooltip">
<i class="fa fa-gear"></i>
</a>
<table class="table profile-table u-m-b-0">
<tbody>
<tr>
<th>Time zone:</th>
<td>Pacific Standard Time (PST)</td>
</tr>
<tr>
<th>Language:</th>
<td>English</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="profile__public">
<div class="row">
<div class="col-xs-12 col-sm-6 u-m-b-xl">
<a role="button" class="btn btn-link profile-tooltip" data-toggle="popover" data-placement="left" tabindex="0" data-trigger="focus" data-content="<p>Want to change your cell phone?</p><p><a href='#' class='btn btn-info'>Make the change now in SuccessFactors</a></p><p>Need to let HR know about a correction needed to data related to your business email, work phone, work location or executive assistant? Talk to your manager for next steps.</p>" data-html="true">
<i class="fa fa-pencil"></i>
</a>
<h3 class="profile-section__title">Work Information</h3>
<table class="table profile-table u-m-b-0">
<tbody>
<tr>
<th class="profile-table__separator">Business email</th>
<td class="profile-table__separator">email@email.com</td>
</tr>
<tr>
<th>Work Location</th>
<td>
15th Floor - 7C<br />
1575 N Gower St.<br />
Los Angeles, CA 90028
</td>
</tr>
<tr>
<th>Work Model</th>
<td>Fully Onsite</td>
</tr>
<tr>
<th>Work Phone</th>
<td>555-555-5555</td>
</tr>
<tr>
<th class="profile-table__separator">Cell Phone</th>
<td class="profile-table__separator">Not available</td>
</tr>
<tr>
<th>Time zone</th>
<td>Pacific Standard Time (PST)</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6 u-m-b-xl">
<a role="button" class="btn btn-link profile-tooltip" id="toggle-mode">
<i class="fa fa-pencil"></i> </a
><!-- Simulate valid form submit (return to 'view' mode) -->
<form id="demo-profile-form" name="demo-profile-form" action="" onSubmit="document.querySelector('#toggle-mode').click(); return false;">
<h3 class="profile-section__title">About me</h3>
<table class="table profile-table u-m-b-0">
<tbody>
<tr>
<th class="u-align-middle">LinkedIn <img src="/images/icon-linkedin.png" alt="" /></th>
<td>
<div class="profile-mode profile-mode--edit js-mode">
<a href="">https://www.linkedin.com/in/...</a>
</div>
<div class="profile-mode profile-mode--view hide js-mode">
<input type="URL" id="linkedinUrl" name="linkedinUrl" class="form-control" placeholder="Enter Your Unique linkedin.com profile URL here" />
</div>
</td>
</tr>
</tbody>
</table>
<table class="table profile-table">
<tbody>
<tr>
<th>Employee Resource Groups</th>
</tr>
<tr>
<td>
<div class="text-muted">Want to add badges to your profile for the ERGs you participate in?</div>
</td>
</tr>
<tr>
<td>
<div class="profile-mode profile-mode--view js-mode">
<ul class="list-inline">
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
<li>
<img src="/images/placeholder/48x48.png" alt="" class="erg-logo" />
</li>
</ul>
</div>
<div class="profile-mode profile-mode--edit hide js-mode">
<select class="js-select-ergs form-control" name="ergs[]" multiple="multiple">
<option value="erg-amp">AMP</option>
<option value="erg-beat">BEAT+</option>
<option value="erg-fusion">Fusion</option>
<option value="erg-parenthood">Parenthood</option>
<option value="erg-proud">Proud</option>
<option value="erg-rise">Rise</option>
<option value="erg-somos">Somos</option>
<option value="erg-woman">Woman+</option>
</select>
</div>
</td>
</tr>
<tr class="hide js-mode">
<td>
<button type="submit" class="btn btn-primary">Save Changes</button>
<a href="#" class="btn btn-link" id="profile-cancel">Cancel</a>
</td>
</tr>
</tbody>
</table>
</form>
<!-- Promo Card - Dark -->
<div class="promo-card">
<div class="promo-card__media">
<img src="/images/icon-lightbulb.svg" alt="" class="promo-card__image" />
</div>
<div class="promo-card__body">
<div class="promo-card__title">We'd like to know!</div>
<div class="promo-card__desc">Professional Profile is one way you can you can let your colleagues know what you're all about! Just tap a <i class="fa fa-pencil"></i> or a <i class="fa fa-camera"></i> to make a change.</div>
</div>
</div>
<!-- /Promo Card - Dark -->
</div>
</div>
</div>
<div class="profile__private">
<a href="#private-info" class="profile__private-header" type="button" data-toggle="collapse" data-target="#profile-info" aria-expanded="false" aria-controls="private-info">
Personal Information
<i class="fa fa-eye-slash"></i>
</a>
<div class="profile__private-body collapse" id="profile-info">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div class="profile__promo text-center">
<div class="profile__promo-title">Want to change your Personal Information?</div>
<a href="#" class="btn btn-info"
>Make changes in SuccessFactors
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /PRIVATE Profile Modal -->
.profile {
// Bootstrap modal overrides
.modal-header {
background-color: $color-blue-medium;
padding: 0.4rem 1.6rem;
@media (min-width: $breakpoint-desktop) {
padding-left: 3.2rem;
}
}
.modal-title {
@include typeHeadline(true);
color: $color-base-white;
text-transform: uppercase;
@media (min-width: $breakpoint-desktop) {
@include typeDisplay(true);
}
}
.modal-dialog {
width: auto;
max-width: 111.2rem;
}
.modal-content {
border-radius: 0;
}
.close {
font-size: 3.2rem;
color: $color-base-white;
opacity: 1;
}
.modal-body {
padding: 0;
}
// Bootstrap popover overrides
.popover {
@include typeSubheader(true);
max-width: 32rem;
background-color: $color-blue-dark;
border-radius: 0;
color: $color-base-white;
&.left > .arrow::after {
border-left-color: $color-blue-dark;
}
&.right > .arrow::after {
border-right-color: $color-blue-dark;
}
&.top > .arrow::after {
border-top-color: $color-blue-dark;
}
&.bottom > .arrow::after {
border-bottom-color: $color-blue-dark;
}
}
}
.profile__top {
position: relative;
}
.profile__image {
width: 10.8rem;
height: 10.8rem;
border-radius: 50%;
border: 0.4rem solid $color-base-white;
@media (min-width: $breakpoint-desktop) {
width: 21.6rem;
height: 21.6rem;
}
}
.profile__name {
@include typeDisplayMedium(true);
padding-left: 1.2rem;
padding-bottom: 1.2rem;
overflow-wrap: break-word;
word-break: break-word;
background-color: $color-base-white;
text-align: center;
@media (min-width: $breakpoint-desktop) {
text-align: left;
}
}
.profile__avatar-wrap {
margin: 2.4rem;
@media (min-width: $breakpoint-desktop) {
width: calc(50% - 4.8rem);
position: absolute;
z-index: 1;
}
}
.profile__avatar {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
}
}
.profile__avatar-inner {
position: relative;
}
.profile__image-upload {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
@media (min-width: $breakpoint-desktop) {
transform: translate(-66%, -66%);
}
}
.profile__section {
position: relative;
padding: 2.4rem;
@media (min-width: $breakpoint-desktop) {
padding-right: 4rem;
padding-left: 50%;
}
&.profile__section--dark {
color: $color-base-white;
background-color: $color-base-blue;
}
}
.profile__details {
display: grid;
gap: 1.2rem;
justify-content: center;
@media (min-width: $breakpoint-desktop) {
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0.8rem;
}
}
.profile__manager {
grid-row: span 2;
}
.profile__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
background-color: $color-base-blue;
@media (min-width: $breakpoint-desktop) {
justify-content: flex-start;
}
}
.profile__public {
padding: 2.4rem;
}
.profile-section__title {
@include typeHeadline(true);
color: $color-blue-medium;
}
.profile-table {
th {
white-space: nowrap;
}
td {
width: 100%;
}
// Override Bootstraps borders
> tbody > tr > td,
> tbody > tr > th {
border-top-width: 0;
word-break: break-word;
}
}
.profile-table__separator {
border-bottom: 1px solid $color-grey-light;
}
.erg-logo {
width: 48px;
height: 48px;
border-radius: 50%;
}
.profile-tooltip {
font-size: 2rem;
position: absolute;
top: 0;
right: 0;
color: $color-grey-dark;
.profile__section--dark & {
color: $color-base-white;
}
}
.profile__private-header {
@include typeHeadline;
display: block;
padding: 2.4rem;
background-color: $color-grey-light;
color: $color-grey-dark;
position: relative;
&::after {
@include typeHeadline;
content: "-";
position: absolute;
right: 2.4rem;
}
&.collapsed::after {
content: "+";
}
&:focus {
color: $color-grey-dark;
}
}
.profile__private-body {
padding: 2.4rem;
}
.profile__promo {
background-color: $color-blue-dark;
color: $color-base-white;
padding: 2.4rem;
.btn {
white-space: normal;
}
}
.profile__promo-title {
@include typeTitle(true);
margin-bottom: 1.2rem;
}
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
$(".js-select-ergs").select2({
width: "100%",
placeholder: "Pick one or more from this list",
closeOnSelect: false,
});
// Simulate view/edit mode and cancel
$("#toggle-mode, #profile-cancel").on("click", function () {
$(".js-mode").toggleClass("hide");
});
});