<section class="c-profile-header__container c-profile-header__container--company o-stack--sm">
<h4 class="c-profile-header__type">Company</h4>
<header class="c-profile-header__header">
<div class="c-profile-header__logo o-grid__span-row--2">
<img src="https://via.placeholder.com/500.png" alt="Company logo">
</div>
<div class="u-d-flex o-grid__span-col--2">
<h3 class="o-display--md u-mr-auto">RTS</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 o-grid__start-col--2">
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#globe"></use>
</svg>
<span><a href="#0">https://rtsinspection.com</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">
<svg class="o-icon" aria-hidden="true">
<use href="#mappin"></use>
</svg>
<span>12250 S Interstate Hwy 35 Dilley, TX 78017</span>
</p>
</div>
<div class="c-profile-header__header-info c-profile-header__header-info--long">
<svg class="o-icon" aria-hidden="true">
<use href="#people"></use>
</svg>
<ul class="c-profile-header__header-info-columns">
<li><a href="#0">Bryan Boswell</a></li>
<li><a href="#0">Joe Guzman</a></li>
<li><a href="#0">Chris Olmos</a></li>
<li><a href="#0">Jeremy Armijo</a></li>
<li><a href="#0">Kevin Murphy</a></li>
<li><a href="#0">Carson Scitern</a></li>
<li><a href="#0">Buddy Scitern</a></li>
<li><a href="#0">Kevin Rangel</a></li>
<li><a href="#0">Michelle Wagley</a></li>
<li><a href="#0">Tino Rubio</a></li>
<li><a href="#0">Julia Burford</a></li>
<li><a href="#0">Frank Vergara</a></li>
<li><a href="#0">Mario Armijo</a></li>
</ul>
</div>
</header>
</section>
<section class="c-profile-header__container c-profile-header__container--company o-stack--sm">
<h4 class="c-profile-header__type">Company</h4>
<header class="c-profile-header__header">
<div class="c-profile-header__logo o-grid__span-row--2">
<img src="https://via.placeholder.com/500.png" alt="Company logo">
</div>
<div class="u-d-flex o-grid__span-col--2">
<h3 class="o-display--md u-mr-auto">RTS</h3>
{{> '@buttons' mod="primary" btnText="Add new log"}}
</div>
<div class="c-profile-header__header-info o-grid__start-col--2">
<p class="c-profile-header__header-info__item">
<svg class="o-icon" aria-hidden="true">
<use href="#globe"></use>
</svg>
<span><a href="#0">https://rtsinspection.com</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">
<svg class="o-icon" aria-hidden="true">
<use href="#mappin"></use>
</svg>
<span>12250 S Interstate Hwy 35 Dilley, TX 78017</span>
</p>
</div>
<div class="c-profile-header__header-info c-profile-header__header-info--long">
<svg class="o-icon" aria-hidden="true">
<use href="#people"></use>
</svg>
<ul class="c-profile-header__header-info-columns">
{{#each infoItem}}
<li>{{{.}}}</li>
{{/each}}
</ul>
</div>
</header>
</section>
/* No context defined for this component. */
.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.