Design Seeds Boiler - Component Library

Card: Profile 

<div class="card card-profile">
    <div class="card__inner">
        <div class="card__top">
            <div class="card__img">
                <img src="/assets/img/profile-1.png" width="140" height="140">
            </div>
            <h2 class="card__heading">
                <span class="card-profile__name">A Name</span>
                <span class="card-profile__position">Joint Director</span>
                <span class="card-profile__location">(University of Manchester)</span>

            </h2>
        </div>

        <div class="card__details">
            <p>Kath is a practising GP and Professor of Health Policy and Primary Care at the University of Manchester. Her research focuses upon health policy, organisation and management, with a particular focus upon commissioning, service planning and the organisation of primary care. </p>
        </div>
        <div class="card__btm">
            <button class="btn btn--alt btn--icon ">
                See more

                <svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
                    <use xlink:href="#icon__arrow"></use>
                </svg>

            </button>
        </div>
    </div>
</div>
 
<div class="card card-profile">
    <div class="card__inner">
        <div class="card__top">
            <div class="card__img">
                <img src="/assets/img/profile-1.png" width="140" height="140">
            </div>
            <h2 class="card__heading">
                <span class="card-profile__name">{{ name | default('A Name') }}</span>
                <span class="card-profile__position">Joint Director</span>
                <span class="card-profile__location">(University of Manchester)</span>
            
            </h2>
        </div>
       


        <div class="card__details">
            <p>Kath is a practising GP and Professor of Health Policy and Primary Care at the University of Manchester. Her research focuses upon health policy, organisation and management, with a particular focus upon commissioning, service planning and the organisation of primary care. </p>
        </div>
        <div class="card__btm">
            {% render "@button--default" with {classess:'btn--alt btn--icon', icon: '@icon--icon__arrow', 'svgsize':'a-icon__svg--x2', 'name' : 'See more'} %}
    
        </div>
    </div>
</div>
 
/* No context defined. */

No notes defined.