Custom theme (replace with client name)

Profile card 

<article class="person-card">
    <div class="person-card__image">
        <picture class="profile-card__picture">
            <source srcset="" type="image/webp">
            <source srcset="" type="image/jpeg">
            <img class="profile-card__image" src="" data-cy="profile-card__image" width="260" height="160" alt='Alt text' />
        </picture>
    </div>
    <div class="person-card__info-and-related">
        <div class="person-card__info">
            <div class="profile-card__title">
                <div class="card-title">
                    <div class="card-title__title">
                        <h2 class="linked-title linked-title--">
                            <a href="#" class="linked-title__link">
                                Wendy D. Sanchez
                                <span class="linked-title__link-icon">
                                    <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
                                        <path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
                                    </svg>

                                </span>
                            </a>
                        </h2>
                    </div>
                </div>
            </div>
            <div class="profile-card__contact">
                <div class="profile-card__contact-email">
                    <a href="mailto:WendyDSanchez@teleworm.us" class="profile-card__contact-email-link">
                        WendyDSanchez@teleworm.us
                    </a>
                </div>
                <div class="profile-card__contact-phone">
                    <a href="tel:615-691-3250" class="profile-card__contact-phone-link">
                        615-691-3250
                    </a>
                </div>
            </div>
        </div>
        <div class="person-card__related">
        </div>
    </div>
</article>
 
{% embed 'templates/person-card/person-card.twig' %}
    {% block image %}
        <picture class="profile-card__picture">
            <source srcset="{{ person.featuredImage.src | resize(880, 560) | towebp }}" type="image/webp">
            <source srcset="{{ person.featuredImage.src | resize(880, 560) | tojpg }}" type="image/jpeg">
            <img class="profile-card__image" src="{{ person.featuredImage.src | resize(260, 160) }}"
                 data-cy="profile-card__image" width="260" height="160" alt='{{ person.featuredImage.altText ?: 'Alt text' }}'/>
        </picture>
    {% endblock %}
    {% block info %}
        <div class="profile-card__title">
            {% include 'bits/card-title/card-title.twig' with {
                url: person.permalink,
                text: person.fullName,
                background: background,
            } %}
        </div>
        {% if person.titles %}
        <div class="profile-card__current">
            <div class="profile-card__titles">
                {{ person.titles }}
                {% if person.title2 %}
                    <br>{{ person.title2 }}
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% if person.emailAddress or person.phoneNumber %}
        <div class="profile-card__contact">
            {% if person.emailAddress %}
            <div class="profile-card__contact-email">
                <a href="mailto:{{ person.emailAddress }}" class="profile-card__contact-email-link">
                    {{ person.emailAddress }}
                </a>
            </div>
            {% endif %}
            {% if person.phoneNumber %}
            <div class="profile-card__contact-phone">
                <a href="tel:{{ person.phoneNumber }}" class="profile-card__contact-phone-link">
                    {{ person.phoneNumber }}
                </a>
            </div>
            {% endif %}
        </div>
        {% endif %}
    {% endblock %}
{% endembed %}
 
{
  "person": {
    "fullName": "Wendy D. Sanchez",
    "titles": "",
    "photo": {
      "src": "https://placekitten.com/272/352",
      "altText": "friendly kitten"
    },
    "emailAddress": "WendyDSanchez@teleworm.us",
    "phoneNumber": "615-691-3250",
    "permalink": "#"
  }
}
  • Content: 
    .profile-card
    &__title
        margin-bottom 8px

        a
            @extends $headline2
            color var(--cardTitleColor)

    &__current
        margin-top 4px
    &__titles
        font-size 16px
        font-weight 400
        color var(--cardJobTitleColor)
    &__contact
        margin-top 16px
    &__contact-email
    &__contact-phone
        margin-bottom 6px
    &__contact-email-link
    &__contact-phone-link
        @extends $hypertext
        text-decoration none
        color var(--cardContactInfoColor)
        font-size 16px
        display inline-block
  • URL: /components/raw/profile-card/profile-card.styl
  • Filesystem Path: patterns/partials/profile-card/profile-card.styl
  • Size: 585 Bytes

No notes defined.