FAA Pattern Library - Network

Related Person Card 

<article class="related-person-card related-person-card--light related-person-card--network">
    <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": "network",
  "departmentName": "Network",
  "background": "light"
}
  • 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:
  • Filesystem Path: components/templates/related-person-card/related-person-card.twig

There are no notes for this item.