Custom theme (replace with client name)

Person Card 

<article class="person-card">
    <div class="person-card__image">
    </div>
    <div class="person-card__info-and-related">
        <div class="person-card__info">
        </div>
        <div class="person-card__related">
        </div>
    </div>
</article>
 
<article class="person-card">
    <div class="person-card__image">
        {% block image %}{% endblock %}
    </div>
    <div class="person-card__info-and-related">
        <div class="person-card__info">
            {% block info %}{% endblock %}
        </div>
        <div class="person-card__related">
            {% block related %}{% endblock %}
        </div>
    </div>
</article>
 
/* No context defined. */
  • Content: 
    .person-card
    --cardBackgroundColor cloud
    --cardTitleColor charcoalLight
    --cardJobTitleColor greyDarkest
    --cardContactInfoColor charcoalLight
    --badgeBackgroundColor cloudDarker
    --badgeTextColor charcoalLight

    display flex
    background-color var(--cardBackgroundColor)
    margin-bottom 16px

    &__image
        display none

        +above(600px)
            display block
            flex 0 0 152px
            height 192px
            padding 24px 0 24px 24px


    &__info-and-related
        flex 1
        margin 0
        padding 24px

        +above(600px)
            display flex

    &__info
        flex 1

    &__related
        +below(600px)
            margin-top 16px
            margin-left -10px
  • URL: /components/raw/person-card/person-card.styl
  • Filesystem Path: patterns/templates/person-card/person-card.styl
  • Size: 744 Bytes

No notes defined.