Page History

HTML

<link rel="stylesheet" href="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/stylesheets/MorganStanley/profile.css" > </link>

<div class="content">
    <a id="back-btn" href="#">Go Back</a>
    <div class="profile-container">
        <section class="left">
            <div class="profile-card">
                <div class="img">
                    <img id="profile-picture" />
                </div>
                <p id="name"> </p>
                <p id="designation"> </p>
                <p id="tagline"> </p>
                <div id="distinction"> </div>
                <hr />
                <div class="strengths" hidden>
                    <p class="left-col-titles strengths-title">Strengths</p>
                    <div id="filterOptions">
                    </div>
                </div>
                <div id="location-section" hidden>
                    <p class="left-col-titles">Location</p>
                    <p id="location"> </p>
                </div>
                <div id="stage-section" hidden>
                    <p class="left-col-titles">Stage</p>
                    <p id="stage"> </p>
                </div>
                <div id="connect">
                    <div class="connecttoContainer">
                        <a href="#calendly" id="connecttoHref">
                            <button class="connecttoButton" onclick="setAnalytics('Booking', '')">REQUEST A MEETING</button>
                        </a>
                    </div>
                    <!--<a id="slack" class="link">SLACK</a>-->
                    <a id="linkedIn" class="link"><button>VIEW LINKEDIN</button></a>
                    <a id="company-website" class="link" hidden><button>VISIT WEBSITE</button></a>
                </div>
            </div>
        </section>

        <section class="right">
            <p id="about-title" class="title">ABOUT</p>
            <p class="text" id="description"> </p>
            <div class="member-section cards-section" hidden>
		        <p class="title">MEET THE TEAM</p>
		        <div id="members-cards" class="vertical-cards"> <div>
		    </div>
        </section>
    </div>
</div>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"> </script>
<script

...

Height	auto
Width	15%

...

group	confluence-administrators

Custom column

Height	auto
Width	15%

Custom button

Type	custom-button
Text	Edit Profile
Width	100%

...

General sidebar

MessageButtonTitle	Website
Tagline	Health and Wellness
ImageSrc	/download/attachments/50546285/vienhealth%20%281%29.png?version=1&modificationDate=1610755342070&api=v2
MessageButtonCustomCSS	background-color: #6781ca;
BackButtonCustomCSS	background-color: #636363;
BackButtonUrl	/display/MEM/Network#tab-COMPANIES
MessageButtonUrl	https://www.vienhealth.com
SidebarHeight	100%
BackButtonTitle	Back to Companies
Name	Vien Health

Location

United States

Company Stage

Bootstrapped

Amount Raised

$0

Tags

Health and Wellness

Dynamic general sidebar

MessageButtonTitle	Website
MessageButtonCustomCSS	background-color: #6781ca;
BackButtonCustomCSS	background-color: #636363;
BackButtonUrl	/display/MEM/Network#tab-COMPANIES
SidebarHeight	100%
BackButtonTitle	Back to Companies

...

Height	auto
Width	85%

...

ContentHeight	120hv

HTML
<img src="/download/attachments/50546285/Group_10593.png?version=1&modificationDate=1610755285607&api=v2" class="service-banner hide-on-mobile">

General description

MyTitle	A trusted and familiar virtual home where you will experience a “healing touch” – that is, personalized and personable care.

Vien Health is the first comprehensive virtual care solution connecting health organizations, doctors and patients across the continent of Africa with an end-to-end electronic health record system.

We are a motivated team with a mission to transform the health of everyone in Africa through the best possible care. Our approach for helping patients manage their health and address recurring issues is holistic health. It is designed to marginally improve their health from the inside out.

We combining cloud-based technology, a dedicated business unit, and operational support into a comprehensive and holistic healthcare solution, these services are tailored to exceed the evolving needs of hospitals and health systems at unmatched quality and scale.

Our goal is to strengthen Africa’s backbone with the sole aim of placing smart healthcare in the hands of everyone.

...

MyTitle	Vien Health Team

General info cards

List members

GroupName	unt-$paramName-users

HTML

<!-- LOADING SPINNER -->
<div id="cover"><div class="loader"></div></div>
<script> 
AJS.$("#full-height-container").css("overflow", "hidden");
AJS.$(window).on('load', function() {
	AJS.$("#full-height-container").css("overflow", "unset");
   $("#cover").hide();
});
</script>
<style>
#main-content > p {
	display: none;
}
#cover {
	position: fixed; 
	height: calc(100% - 100px); 
	width: 100%; 
	top:61px; left: 0; 
	background: var(--secondary-color); 
	z-index:9999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 100px;
}
.loader {
    border: 5px solid #f3f3f3;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

HTML

<style>
/* MAIN / OUTER CONTAINERS */
#company-profile-container {
	position: relative;
	flex-direction: column;
    height: auto !important;
    width: 100%;
}
#company-profile-content {
    display: flex !important;
    flex-direction: row;
    width: 85%;
    margin: 0 auto;
    position: relative;
	height: auto !important;
    top: -200px;
  	border: 1px solid var(--primary-color);
	max-width: 1100px;
}
#main-content > p {
	display: none;
}
.custom-column-container {
	width: 100%;
}
#main-content > .custom-section-container {
	position: relative;
}

/* SIDEBAR */
.sidebar-container {
	height: auto !important;
}
#company-sidebar-container {
	width: 300px;
	flex-direction: column;
	height: auto !important;
    background-color: var(--primary-color);
    min-width: 300px;
}
#company-sidebar-container .custom-column-container {
	width: 100% !important;
}
#edit-profile-button-container {
	height: max-content !important;
}
#edit-profile-button {
	height: max-content;
	width: 100%
}
#edit-profile-button button {
	padding: 10px 0px;
}
.badges-container-sidebar {
	display: none !important;
}
.general-sidebar-content {
	padding-top: 0px !important;
	width: 100% !important;
}
.general-image-wrapper {
	width: 100% !important;
}
.general-image-wrapper img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 0px !important; 
}
.sidebar-container .general-description-wrapper {
	padding: 30px;
}
.general-description-wrapper .general-name {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-title);
    text-transform: none;
    color: var(--secondary-font-color);
}
.general-description-wrapper .general-tagline {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-title);
    color: var(--secondary-font-color);
}
#company-sidebar-container .info-wrapper h3 {
	font-family: var(--main-font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-title);
    color: var(--secondary-font-color);
}
#company-sidebar-container .info-wrapper p {
	font-family: var(--secondary-font-family);
	font-weight: var(--font-weight-title);
    color: var(--secondary-font-color) !important;
	font-size: var(--font-size-s);
}
#company-sidebar-container .info-wrapper p span {
	color: var(--secondary-font-color) !important;
}
#company-sidebar-container .info-wrapper {
    border-top: 1px solid #505050;
    padding: 30px;
	padding-bottom: 45px;
}


/* MAIN CONTENT / DESCRIPTION */
#company-profile-content .content-container {
	height: auto;
	position: relative;
    min-height: calc(100% - 150px);
    border-left: 1px solid gray;
}

.content-container {
    background-color: transparent;
}

.content-container > .general-text-container {
	width: 100%;
	padding: 0px;
}

.content-container .body-container {
    font-family: var(--main-font-family);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-paragraph-text);
    font-style: normal;
    font-stretch: normal;
    line-height: 2.3;
    letter-spacing: var(--letter-spacing);
    padding: 50px;
}

.content-container .body-container p span  {
	color: var(--primary-font-color) !important;
}

.content-container .buttons-wrapper {
    display: flex;
    flex-direction: row;
    padding: 50px;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
    width: calc(100% - 100px);
    position: absolute;
    bottom: 0px;
}

#message-button-link > button, #back-button-link > button {
	border-radius: var(--border-radius);
	font-size: 14px;
	font-weight: var(--font-weight-super-title);
    text-transform: uppercase;
    width: 200px;
}

#message-button-link > button:hover {
	opacity: 0.95;
}

#back-button-link > button {
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--primary-font-color);
    width: 200px;
    margin-top: 0px;
}

button.msg-button {
    background-color: var(--sidebar-bb-fill) !important;
}

#back-button-link > button {
	background-color: var(--secondary-color) !important;
}

.my-title {
    letter-spacing: var(--letter-spacing);
}

#company-description-container {
    background-color: var(--mainprof-background);
}

#company-description-container .my-title {
	background-color: var(--primary-color);
    color: var(--secondary-font-color);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    font-weight: var(--font-weight-title);
    font-size: var(--font-size-l);
    letter-spacing: var(--letter-spacing);
    line-height: var(--paragraph-line-height);
    padding: 40px 50px;
}

/* COMPANY TEAM (BOTTOM SECTION) */
#company-team-container {
    flex-direction: column;
    height: fit-content !important;
    min-height: 300px;
    padding-bottom: 100px;
    width: 84%;
    margin: 0 auto;
	  position: relative;
    top: -100px;
	  max-width: 1100px;
}
#company-team-container .general-text-container {
  padding: 0px;
  width: 100%;
  height: max-content !important;
}
.general-text-container {
    padding: 0px;
    width: 100%;
}
#company-team-container .info-cards-container {
    margin: 0px;
    padding: 0px;
    width: 100%;
}
#company-team-container #myCards-companyteam-listmembers {
  	display: grid !important;
    grid-template-columns: repeat(auto-fill, 320px);
    grid-gap: 20px;
    justify-content: space-evenly;
  	width: 100%;
}
#myCards-companyteam-listmembers .tintedrect-listmempag {
	margin: 0px !important;
}
#company-team-container .info-cards-container > p {
	display: none;
}
#company-team-container .info-cards-container {
	display: grid !important;
    grid-template-columns: repeat(auto-fill, 320px);
    grid-gap: 20px;
    justify-content: space-evenly;
}


@media only screen and (max-width: 1000px) {
	.content-container .buttons-wrapper {
		flex-direction: column;
	}
	#message-button-link, #back-button-link {
		width: 100% !important;
		margin: 10px 0px;
	}
	#message-button-link > button, #back-button-link > button {
		width: 100%;
	}
}

@media only screen and (max-width: 750px) {
	.none-found {
		text-align: center;
	}
	#company-description-container .my-title {
		font-size: var(--font-size-m);
        text-align: left;
        color: var(--secondary-font-color) !important;
        background: var(--primary-color);
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: var(--secondary-font-color);
	}

	#rw_wrapper #rw_main #rw_theme_content #main {
		background-color: var(--secondary-color);
	}
	#company-sidebar-container {
		width: 100%;
	}
	.service-banner {
		height: 150px; 
	}
	#company-profile-content { 
		top: -30px
	}
	#company-profile-content .content-container {
		flex-direction: column-reverse;
		border: none;
	}
	.content-container .buttons-wrapper {
		position: relative;
	}
	#company-profile-content {
		flex-direction: column;
		width: 100%;
		border: none;
	}
	.general-sidebar-content {
		position: relative;
	}
	.general-sidebar-content .general-image-wrapper {
		position: absolute;
		top: -70px;
    	width: 90px !important;
    	height: 90px !important;
    	left: 40px;
		border: 1px solid var(--primary-color);
	}
	#company-team-container .general-text-container .my-title {
		font-weight: var(--font-weight-title);
		text-align: left;
    }
    
    #company-sidebar-container .info-wrapper p {
        padding: 0px 40px;
    }
	
}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) {
    #company-profile-content .content-container {
        padding-bottom: 70px;
    }
	#company-profile-content { 
		top: unset;
	}
	#company-sidebar-container .info-wrapper {
    	width: 100%;
	}
	.content-container .buttons-wrapper { 
		padding: 40px;
		width: calc(100% - 80px);
	}
	.service-banner {
		display: block !important;
		width: 100%;
        height: 110px;
	}
	.sidebar-container .general-description-wrapper {
    	padding-top: 35px;
    	padding-bottom: 10px;
	}
	#company-team-container {
		width: 320px;
	}
	#page .rw_content_spaces_white1 #likes-and-labels-container, #page .rw_content_spaces_white1 .rw_blogpost_share {
		display: none;
	}
	.none-found { 
		font-size: var(--font-size-s) !important; 
    	color: var(--primary-color);
		letter-spacing: var(--letter-spacing) !important; 
	}
}
</style>

HTML

<style>
div.general-image-wrapper {
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    height: unset !important;
}

div.sidebar-container {
    border-right: solid 1px #e0e0e0;
    background-color: #ffffff;
    width: calc(100% - 60px);
    padding: 30px;
    height: 100% !important;
    font-family: var(--main-font-family);
    color: var(--primary-font-color);
    text-align: left;
}

div.sidebar-container .general-description-wrapper {
    padding: 30px 0;
    text-align: left;
}

div.info-wrapper {
    color: var(--primary-font-color);
    
}

.info-wrapper h3 span, .info-wrapper p span {
    color: var(--primary-font-color) !important;
    font-family: var(--main-font-family);
	text-align: left !important;
}

.info-wrapper h3 span {
    font-size: 18px;
    font-weight: bold;
}

.info-wrapper p span {
    font-size: 18px;
}

div#\$paramContainerID {
    width: calc(100vw - 160px);
    margin: 80px;
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
}


div#main-content {
    background: #ffffff;
}

.custom-column-container:nth-child(2) {
    width: calc(15% + 60px) !important;
}

.custom-column-container:nth-child(4) {
    width: calc(85% - 60px) !important;
}

.info-wrapper h3, .info-wrapper p {
    display: flex;
}

div.info-wrapper {
    padding: 20px 0;
}

div.sidebar-container .general-description-wrapper {
    width: 100%;
}

.buttons-wrapper {
    /* margin-top: 40px; */
}

.buttons-wrapper #message-button-link > button, #back-button-link > button {
    border-radius: 8px;
    background: var(--primary-color) !important;
    border: none;
    color: #ffffff;
    font-family: var(--main-font-family);
    font-size: 14px;
    padding: 18px;
    height: 54px;
    width: 100%;
}

button.msg-button {
    margin-bottom: 15px;
}

a#message-button-link, a#back-button-link {
    width: 100%;
}

p.my-title {
    padding: 50px 50px 0 50px;
    font-size: 28px;
    font-weight: bold;
    font-family: var(--main-font-family);
}

.body-container {
    font-size: 18px !important;
    letter-spacing: 0.45px !important;
}

div.info-cards-container {
    width: 100%;
    padding: 50px;
}

.general-text-container:nth-child(5) .my-title {
    padding-top: 0;
}

.general-text-container:nth-child(5) .body-container {
    display: none;
}

.custom-column-container:nth-child(2) {
    margin: 0 auto;
}

button.my-button {
    border-radius: 8px;
    background: var(--primary-color) !important;
    border: none;
    color: #ffffff;
    font-family: var(--main-font-family);
    font-size: 14px;
    padding: 18px;
    height: 54px;
    margin-top: 10px;
}
</style>

 src="https://gsvlabs-confluence-files.s3

-

.us-west-2.amazonaws.com/js/

tdm

Morgan+Stanley/

tdmCompanyProfile

profile.js

"><

?v=2"> </script>

Show If

HTML
<link rel="stylesheet" href="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/Passport/tdmCompanyProfileStylesheet.css" />

HTML

Content

Space Tools

Versions Compared

Old Version 5

New Version Current

Key

Location

Company Stage

Amount Raised

Tags