<div class="people-header people-header--network">
<div class="people-header__back-button">
This is navigation
</div>
<div class="people-header__content">
<div class="people-header__primary-info">
This is content
</div>
<div class="people-header__photo">
This is photo
</div>
</div>
</div>
<div class="people-header people-header--{{ siteUnit }}">
<div class="people-header__back-button">
{% block navigation %}
This is navigation
{% endblock %}
</div>
<div class="people-header__content">
<div class="people-header__primary-info">
{% block content %}
This is content
{% endblock %}
</div>
<div class="people-header__photo">
{% block photo %}
This is photo
{% endblock %}
</div>
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light"
}
.people-header
full = 1000px
medium = backButtonBreakpoint
background-color cloud
padding-top 42px
padding-bottom 64px
&--college
background-color white
&--durp
border-top 8px solid illiniOrange
&--music
background-color almaMaterDark
&__back-button
margin-bottom 32px
@extends $contentContainer
&__content
+above(medium)
display flex
@extends $contentContainer
&__primary-info
flex 1
max-width 520px
order 2
&__photo
align-self flex-start
flex 0 0 23%
order 1
+above(medium)
max-width 208px
+below(medium)
margin-top 48px
+above(medium)
margin-right 4.6%
&--music .captioned-image__caption
color rgba(255, 255, 255, 0.75)
There are no notes for this item.