Related Person Card

Ready

HTML
View
Context
Assets
Info
Notes


        
        <article class="related-person-card related-person-card--dark related-person-card--durp">
    <div class="related-person-card__info-and-related">
        <div class="related-person-card__info">
        </div>
        <div class="related-person-card__related">
        </div>
    </div>
</article>


        <article class="related-person-card related-person-card--{{ background }} related-person-card--{{ siteUnit }}">
    <div class="related-person-card__info-and-related">
        <div class="related-person-card__info">
            {% block info %}{% endblock %}
        </div>
        <div class="related-person-card__related">
            {% block related %}{% endblock %}
        </div>
    </div>
</article>


        
            
            {
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark"
}

File:

Content:


                                .related-person-card
    --cardBackgroundColor cloud

    display flex
    padding 24px
    background-color var(--cardBackgroundColor)
    margin-bottom 16px
    width 432px

    &--dark
        --cardBackgroundColor charcoalLighter

    &__info-and-related
        flex 1
        margin 0

    &__info
        flex 1

    &__related
        margin-top 16px
        margin-left -10px

URL: /components/raw/related-person-card/related-person-card.styl
Filesystem Path: components/templates/related-person-card/related-person-card.styl
Size: 385 Bytes

Handle: @related-person-card
Preview:
- With layout
- Component only
Filesystem Path: components/templates/related-person-card/related-person-card.twig

There are no notes for this item.