FAA Pattern Library - Network

Music Alum Card 

<a href="" class="music-alumni__alum">
    <picture class="music-alumni__image-wrap">
        <source srcset="" type="image/webp">
        <img src="" alt="" class="music-alumni__image" width="332" height="480">
    </picture>
    <div class="music-alumni__info">
        <div class="music-alumni__name">

            <span class="music-alumni__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="#FF552E" 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>
        </div>
        <div class="music-alumni__current-job-title"></div>
    </div>
</a>
 
<a href="{{ alum.link }}" class="music-alumni__alum">
    <picture class="music-alumni__image-wrap">
        <source
            srcset="{{ alum.featuredImage.src|towebp|resize(332,480) }}"
            type="image/webp"
        >
        <img src="{{ alum.featuredImage.src|resize(332, 480) }}" alt="{{ alum.featuredImage.altText | escape }}" class="music-alumni__image" width="332" height="480">
    </picture>
    <div class="music-alumni__info">
        <div class="music-alumni__name">
            {{ alum.fullName }}
            <span class="music-alumni__icon">{% include 'bits/icons/right-chevron.twig' %}</span>
        </div>
        <div class="music-alumni__current-job-title">{{ alum.currentJobTitle ? alum.currentJobTitle~', ' : '' }}{{ alum.graduationYear }}</div>
    </div>
</a>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light"
}
  • Handle: @music-alum-card
  • Preview:
  • Filesystem Path: components/partials/homepages/music/alumni/music-alum-card.twig

There are no notes for this item.