<a href="#" class="IndexCard">
    <div class="IndexCard-profile">
        <img class="IndexCard-image" src="/assets/img/team/james-g.jpg" alt="Mrs. Zelda Koelpin">
    </div>
    <!--/.IndexCard-profile-->
    <div class="IndexCard-details">
        <p class="IndexCard-name">Mrs. Zelda Koelpin</p>
        <span class="IndexCard-info">Direct Assurance Specialist</span> </div>
    <!--/.IndexCard-details-->
</a>
<!--/.IndexCard-->
<a href="{{indexCardUrl}}" class="IndexCard{% if indexCardModifier %} IndexCard{{indexCardModifier}}{% endif %}">
    <div class="IndexCard-profile">
        <img class="IndexCard-image" src="{{imageSrc}}" alt="{{indexCardName}}">
    </div><!--/.IndexCard-profile-->
    <div class="IndexCard-details">
        <p class="IndexCard-name">{{indexCardName}}</p>
        {% if indexCardInfo %}<span class="IndexCard-info">{{indexCardInfo}}</span>{% endif %}
    </div><!--/.IndexCard-details-->
</a><!--/.IndexCard-->
{
  "imageSrc": "/assets/img/team/james-g.jpg",
  "indexCardName": "Mrs. Zelda Koelpin",
  "indexCardInfo": "Direct Assurance Specialist",
  "indexCardUrl": "#"
}

IndexCards are a type of content block for displaying small chunks of information; usually as meta information to accompany the content around it. IndexCards can be displayed in as single items (e.g. on articles) or in groups (e.g. listing the team members on the About page).