Cards – Profiles

Markup Reference

Profile with Image

<div class="card card-profile has-image">
    <figure class="card--image">
        <img>
    </figure>
    <div class="card--content-wrapper">
        <a href="#" class="card--heading">
            <span>Bob</span>
            <span>Hoskins</span>
        </a>
        <p class="card--subheading">Chief Bottle Washer</p>
        <p class="card--text">A short sentence</p>
        <ul class="card--list has-separator">
            <li class="card--list-item">
                <a href="#" class="">term</a>
            </li>
            <li class="card--list-item">
                <a href="#" class="">term</a>
            </li>
        </ul>
    </div>
</div>

Profile NO Image

<div class="card card-profile">

    <div class="card--content-wrapper">
        <a href="#" class="card--heading">
            <span>Jennifer</span>
            <span>Aurandt-Pilgrim</span>
        </a>
        <p class="card--subheading">Director of Nuclear Studies</p>
        
        
    </div>
</div>

Card Directory Grid

Containing element needs the following classes

<div class="alignwide card-directory-grid">