<article class="person-card person-card--dark person-card--durp person-card--">
<div class="person-card__image person-card__image--">
</div>
<div class="person-card__info-and-related person-card__info-and-related--">
<div class="person-card__info">
</div>
<div class="person-card__related person-card__related--">
</div>
</div>
</article>
<article class="person-card person-card--{{ background }} person-card--{{ siteUnit }} person-card--{{ displayType }}">
<div class="person-card__image person-card__image--{{ displayType }}">
{% block image %}{% endblock %}
</div>
<div class="person-card__info-and-related person-card__info-and-related--{{ displayType }}">
<div class="person-card__info">
{% block info %}{% endblock %}
</div>
<div class="person-card__related person-card__related--{{ displayType }}">
{% block related %}{% endblock %}
</div>
</div>
</article>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark"
}
.person-card
--cardBackgroundColor cloud
--cardTitleColor charcoalLight
--cardJobTitleColor greyDarkest
--cardContactInfoColor charcoalLight
--badgeBackgroundColor cloudDarker
--badgeTextColor charcoalLight
display flex
background-color var(--cardBackgroundColor)
margin-bottom 16px
&--dark
--cardBackgroundColor charcoalLighter
--cardTitleColor white
--cardJobTitleColor white
--cardContactInfoColor white
--badgeBackgroundColor grey
--badgeTextColor charcoalLight
&--grid
flex-direction column
&__image
display none
+above(600px)
display block
flex 0 0 152px
height 192px
padding 24px 0 24px 24px
&--grid
display block
height 240px
padding 0
&__info-and-related
flex 1
margin 0
padding 24px
+above(600px)
display flex
&--grid
flex-direction column
&__info
flex 1
&__related
+below(600px)
margin-top 16px
margin-left -10px
&--grid
margin-top 16px
margin-left -10px
There are no notes for this item.