<section class="c-profile-header__container c-profile-header__container--person o-stack--sm">
<h4 class="c-profile-header__type">Person</h4>
<header class="c-profile-header__header">
<div class="u-d-flex o-grid__span-col--all">
<h3 class="o-display--md u-mr-auto">Cynthia Young</h3>
<!-- primary button starts -->
<button class="c-btn c-btn--primary">Add new log</button>
<!-- primary button ends -->
</div>
<div class="c-profile-header__header-info">
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#mail"></use>
</svg>
<span><a href="mailto:">[email protected]</a></span>
</p>
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#telephone"></use>
</svg>
<span>123 456 789 111</span>
</p>
<p class="c-profile-header__header-info__item u-color-success">
<svg class="o-icon" aria-hidden="true">
<use href="#approval"></use>
</svg>
<span>Login</span>
</p>
</div>
<div class="c-profile-header__header-info c-profile-header__header-info--long">
<ul class="c-profile-header__header-info-columns">
<li>Manager at <a href="#0">Petromax Operating Co, Inc.</a></li>
<li>Manager at <a href="#0">Pardus Oil & Gas Operating</a></li>
<li>Manager at <a href="#0">Halcon Resources</a></li>
<li>Manager at <a href="#0">Marathon - Eagle Ford</a></li>
<li>Manager at <a href="#0">Weatherford</a></li>
<li>Manager at <a href="#0">RTS - Anadarko (Inactive)</a></li>
<li>Manager at <a href="#0">RTS - Enervest Longview (Inactive)</a></li>
<li>Manager at <a href="#0">Lonestar Operating, LLC</a></li>
</ul>
</div>
</header>
</section>
<section class="c-profile-header__container c-profile-header__container--person o-stack--sm">
<h4 class="c-profile-header__type">Person</h4>
<header class="c-profile-header__header">
<div class="u-d-flex o-grid__span-col--all">
<h3 class="o-display--md u-mr-auto">Cynthia Young</h3>
{{> '@buttons' mod="primary" btnText="Add new log"}}
</div>
<div class="c-profile-header__header-info">
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#mail"></use>
</svg>
<span><a href="mailto:">[email protected]</a></span>
</p>
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#telephone"></use>
</svg>
<span>123 456 789 111</span>
</p>
<p class="c-profile-header__header-info__item u-color-success">
<svg class="o-icon" aria-hidden="true">
<use href="#approval"></use>
</svg>
<span>Login</span>
</p>
</div>
<div class="c-profile-header__header-info c-profile-header__header-info--long">
<ul class="c-profile-header__header-info-columns">
{{#each infoItem}}
<li>{{{.}}}</li>
{{/each}}
</ul>
</div>
</header>
</section>
{
"infoItem": [
"Manager at <a href=\"#0\">Petromax Operating Co, Inc.</a>",
"Manager at <a href=\"#0\">Pardus Oil & Gas Operating</a>",
"Manager at <a href=\"#0\">Halcon Resources</a>",
"Manager at <a href=\"#0\">Marathon - Eagle Ford</a>",
"Manager at <a href=\"#0\">Weatherford</a>",
"Manager at <a href=\"#0\">RTS - Anadarko (Inactive)</a>",
"Manager at <a href=\"#0\">RTS - Enervest Longview (Inactive)</a>",
"Manager at <a href=\"#0\">Lonestar Operating, LLC</a>"
]
}
.c-profile-header__container {
margin: $space-xxs 0 0;
padding: $space-unit $space-unit $space-xxl;
border: rem(1) solid $color-grey-200;
border-radius: $global-radius;
background-color: $color-grey-100;
}
.c-profile-header__container--company {
> .c-profile-header__header {
grid-template-columns: 1fr 1fr 2fr;
}
}
.c-profile-header__container--person {
> .c-profile-header__header {
grid-template-columns: 1fr 3fr;
.c-profile-header__header-info-columns {
grid-template-columns: repeat(auto-fit, minmax(rem(250), 1fr));
}
}
}
.c-profile-header__container--well {
> .c-profile-header__header {
grid-template-columns: 1fr 2fr;
}
}
.c-profile-header__type {
display: inline-block;
margin-left: -#{$space-unit};
padding: $space-xs $space-unit $space-xs;
background-color: $color-grey-600;
color: $color-white;
font-size: $text-size-7;
font-weight: 400;
text-transform: uppercase;
.c-profile-header__container--company > & {
background-color: $color-brand-primary-500;
}
.c-profile-header__container--person > & {
background-color: $color-warning-500;
}
}
.c-profile-header__logo {
display: flex;
align-items: center;
padding: $space-unit;
border: rem(1) solid $color-grey-200;
background-color: $color-white;
> * {
object-fit: contain;
}
}
.c-profile-header__header {
grid-gap: $space-unit;
grid-template-rows: auto 1fr;
display: grid;
}
.c-profile-header__header-info {
.o-icon {
margin-right: $space-xs;
transform: translateY($space-xxxxs);
opacity: 0.7;
}
}
.c-profile-header__header-info--long {
display: flex;
padding-left: $space-unit;
overflow: auto;
}
.c-profile-header__header-info-columns {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(rem(120), 1fr));
grid-template-rows: min-content;
grid-auto-rows: min-content;
grid-column-gap: $space-md;
grid-row-gap: $space-xs;
max-height: rem(250);
}
.c-profile-header__header-info__item {
display: flex;
& + & {
margin-top: $space-sm;
}
}
There are no notes for this item.