SIA Web Design Library

Index Card: Default

No notes defined.

<div class='h-card c-index-card'>
    <div class="c-index-card__media-wrapper">
        <span class='u-photo c-headshot c-index-card__headshot'>
            <a href='https://peter.vandor' class='c-headshot__link ' title='Dr. Peter Vandor'>
                <img class='c-headshot__image' src='/images/portrait-Peter-Vandor-1x1.jpg' alt='' title='' />
            </a>
        </span>
    </div>
    <div class='c-index-card__entity c-index-card__content-wrapper'>

        <span class='p-name'><a class='u-url ' href='https://peter.vandor'>Dr. Peter Vandor</a></span>

        <span class='c-index-card__entity__work c-index-card__entity__work--with-organization'>

            <span class='p-job-title'>Founder and Academic Director</span>

            <span class='p-org'>Social Impact Award</span>
        </span>
        <span class='p-adr h-adr'>
            <span class='postal-code'>1070</span>, <span class='locality'>Vienna</span>, <span class='country-name'>Austria</span> </span>
        <span class='c-index-card__entity__links'>

            <span class='u-email'>
                <a class='u-email c-link--muted c-link--minimal' href='mailto:peter@vandor.mail'>peter@vandor.mail</a>
            </span>

            <span class='p-tel'>
                <a class='p-tel c-link--muted c-link--minimal' href='tel:+436606493214'>+436606493214</a>
            </span>
        </span>
    </div>
</div>
 
<div class='h-card {{ get_component_class( 'index-card', display ) }}'>
    {% if headshot or logo %}
        <div class="c-index-card__media-wrapper">
            {% if headshot %}
                {% include get_template( 'headshot', 'unit' ) with headshot|merge( { 
                    display: { 
                        component: 'index-card' 
                    }, 
                    url: url, 
                    title: name,
                    showInModal: showInModal
                } ) %}
            {% elseif logo %}
                {% include get_template( 'logo', 'unit' ) with logo|merge( { 
                    display: { 
                        component: 'index-card',
                    },
                    url: organisationUrl,
                    showInModal: showInModal
                } ) %}
            {% endif %}
        </div>
    {% endif %}
    <div class='c-index-card__entity c-index-card__content-wrapper'>
        {% if highlight %}
            <div class='c-index-card__highlight'>
                {% include get_template( highlight.component, highlight.type ) with highlight.config|merge( { showInModal: FALSE } ) %}
            </div>
        {% endif %}
        {% if kind %}
            <span class='p-role'>{{ kind }}</span>
        {% endif %} 
        {% if name %}
            {% if url %}
                <span class='p-name'><a class='u-url {% if showInModal %} o-modal-trigger {% endif %}' href='{{ url }}'>{{ name }}</a></span>
            {% else %}
                <span class='p-name'>{{ name }}</span>
            {% endif %} 
        {% endif %}
        {% if role or organisation %}
            <span class='c-index-card__entity__work {% if organisation %}c-index-card__entity__work--with-organization{% endif %}'>
                {% if role %} 
                    <span class='p-job-title'>{{ role }}</span>
                {% endif %} 
                {% if organisation %} 
                    {% if organisationUrl %}
                        <a href='{{ organisationUrl }}' class='u-url p-org c-link--muted'>{{ organisation }}</a>
                    {% else %}
                        <span class='p-org'>{{ organisation }}</span> 
                    {% endif %}
                {% endif %}
            </span>
        {% endif %}
        {% if adr %}
            <span class='p-adr h-adr'>
                {% for key, value in adr %}
                    <span class='{{ key }}'>{{ value }}</span>{% if not loop.last %},{% endif %}
                {% endfor %}
            </span>
        {% endif %}
        {% if email or tel %}
            <span class='c-index-card__entity__links'>
                {% if email %} 
                    <span class='u-email'>
                        <a class='u-email c-link--muted c-link--minimal' href='mailto:{{ email }}'>{{ email }}</a> 
                    </span>
                {% endif %}
                {% if tel %} 
                    <span class='p-tel'>
                        <a class='p-tel c-link--muted c-link--minimal' href='tel:{{ tel }}'>{{ tel }}</a> 
                    </span>
                {% endif %}
            </span>
        {% endif %}
        {% if socialLinks %}
            {% include '@unit/social-links/social-links.twig' with socialLinks %}
        {% endif %}
    </div>
</div>
 
{
  "headshot": {
    "src": "/images/portrait-Peter-Vandor-1x1.jpg"
  },
  "name": "Dr. Peter Vandor",
  "role": "Founder and Academic Director",
  "organisation": "Social Impact Award",
  "url": "https://peter.vandor",
  "email": "peter@vandor.mail",
  "tel": "+436606493214",
  "adr": {
    "postal-code": 1070,
    "locality": "Vienna",
    "country-name": "Austria"
  }
}