candidate-card.mustache

<div class="candidate-card container-padding--zero sm:container-padding--auto {{ classes }}">
  <div class="candidate-card__wrapper {{ wrapperClasses }}">
    <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
      <div class="candidate-card__avatar">
        <div class="candidate-card__position">{{ person.position }}</div>
        <a href="#" data-href="{{ link.templates-candidate-detail }}">{{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}</a>
      </div>
      <div class="candidate-card__bio">
        <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
        <a href="#" class="block font-light mb-4">{{ person.email }}</a>
        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
      </div>
      <div class="candidate-card__affiliation">
        <div>{{ person.age }} let</div>
        <div>
          {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
          <a href="#" class="font-bold font-condensed">{{ person.party }}</a>
        </div>
      </div>
      <div class="card__body candidate-card__social">
        <p class="font-light text-sm leading-snug italic mb-4 hidden md:block">{{ person.claim }}</p>
        {{> molecules-basic-social-icon-group }}
      </div>
    </div>
  </div>
</div>