University of Florida College of the Arts Pattern Library

Person Card 

<article class="person-card">
    <div class="person-card__image">
    </div>
    <div class="person-card__info-and-tags">
        <div class="person-card__info">
        </div>
        <div class="person-card__tags">
        </div>
    </div>
</article>
 
<article class="person-card">
    <div class="person-card__image">
        {% block image %}{% endblock %}
    </div>
    <div class="person-card__info-and-tags">
        <div class="person-card__info">
            {% block info %}{% endblock %}
        </div>
        <div class="person-card__tags">
            {% block tags %}{% endblock %}
        </div>
    </div>
</article>
 
/* No context defined. */
  • Content: 
    .person-card
    --cardBorderColor coolGray3
    --titleColor blue500
    --cardContactInfoColor grey500
    --linkColor blue500

    border-bottom 2px solid var(--cardBorderColor)
    margin-bottom 16px
    overflow auto
    padding-bottom 24px

    &__image
        border-radius 50%
        display block
        float right
        margin 20px
        overflow hidden

    &__info-and-tags
        margin 0

    &__info
        flex 1
        padding 24px 24px 24px 0
  • URL: /components/raw/person-card/person-card.styl
  • Filesystem Path: patterns/templates/person-card/person-card.styl
  • Size: 472 Bytes

No notes defined.