The @uol-people-profile-cards provides a snapshot of a member of staff’s details, as a list of search results.
Each card can contain:
Each card is a link, which when clicked wll take a user to the staff member’s full profile page
Use when a page should contain multiple profiles of staff members, for example, a user searching staff profiles for ‘Smith’ should be returned with a card for each member of staff that has word ‘smith’ in any of the fields or words of that search index.
Do not use in instances where there will only ever be one card displayed, use @uol-people-profile-card instead. An example is if a blog post has a single author, who is a member of staff and the staff member’s profile card is to be displayed on the post, using the singular card prevents an unneccessary the card being structured within an unordered list.
All data is contained within the profiles object
Image guidance can be found on the image documentation page
heading_level is optional, if it is set it should be set using the correct hierarchy, otherwise it will default to <h3>, this is the correct heading level when displayed on a search results page, with a search form and number of results count, although if implementation differs, the heading level should be reflect any changes in the overall page heading outline.
example:
'profiles': {
'heading_level': 'h4', //This example uses 'h4', however, in most instances, 'h3' is correct and this can be omitted
'items': [
...
]Each card is an item, within the items array.
Example:
'profiles': {
'items': [
{
...
},
{
...
},
{
...
},
{
...
},
...
]
}The profile image is optional, when an image is provided, it should be a profile image of the member of staff, in a sutable resolution. The maximum size of the image when displayed is 172px * 172px and to prevent distortion for users that zoom the page, the minimum resolution should be double, e.g 344px * 344px. Alternative text is programmatically set and will be set as ‘Profile picture of [staff member’s name].
An image only requires a path to the image location.
Example:
'profiles': {
'heading_level': 'h3',
'items': [
{
'img': '/placeholders/ph-profile-staff-01.jpg',
...
},
...The URL requires a link to the full people profile page of the member of staff.
Example:
'profiles': {
'heading_level': 'h3',
'items': [
{
...
'url': 'https://leeds.ac.uk/profile-professor-jane-smith',
},The name of the staff member should be set using person_name
The staff member’s position within the organisation should be set using position
The staff member’s specialisms should be set as a comma-space delimited list, within the specialisms array
Example:
'profiles': {
'heading_level': 'h3',
'items': [
{
...
'specialisms': ['Higher Lie and gauge theory', 'Higher dimensional category theory', 'Hopf algebras', 'quantum invariants of knots and manifolds', 'Topological quantum computing', 'Modelling topological phases of matter'],
...
},email is a link that a user can click which will then open up their default email client and the email should therefore be correctly formatted
A Phone number is optional and if provided should be provided in the format required by the University’s style guide e.g. ‘+44(0)113 343 5000’ or ‘0113 343 5000’. The phone number is also a tel: link, so users with a supporting device or software can call directly from their device by actioning the link. If the number is an international number containing the replaceable zero ‘(0)’, this will be removed in the link’s href to ensure it works correctly, it will still display the replaceable zero in the link text.
Example:
If the phone value is set to ‘+44(0)113 343 5000’, the resulting HTML will be as follows: <a href="tel:+441133435000">+44(0)113 343 5000</a>
A full example of an item to display is as follows (this example omits the heading_level):
'profiles': {
'items': [
{
'img': '/placeholders/ph-profile-staff-01.jpg',
'url': '#',
'person_name': 'Tony Bailey',
'position': 'Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education',
'specialisms': ['Deafness in childhood and young people (0-25 yrs)', 'Language development', 'Special educational needs and disability', 'Inclusive education', 'Classroom practice', 'Teacher development and CPD'],
'email': 'bailey92@techholic.in',
'phone': '+44(0)113 343 5000'
},
...
{% if profiles.items.length %}
<{{ 'ul' if profiles.items.length > 1 else 'div'}} class="uol-people-profile-cards">
{% for profile in profiles.items %}
{% render '@uol-people-profile-card--list-item',
{ heading_level: profiles.heading_level,
multiple: profiles.items.length > 1,
item: profile }
%}
{% endfor %}
</{{ 'ul' if profiles.items.length > 1 else 'div'}}>
{% endif %}
<ul class="uol-people-profile-cards">
<li class="uol-people-profile__card ">
<h3 class="uol-people-profile__name">
<a href="#">Isla Ellis</a>
</h3>
<strong class="uol-people-profile__position">Lecturer in Algebra</strong>
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Areas of expertise</dt>
<dd class="uol-info-list__data ">
Deafness in childhood and young people (0-25 yrs)
</dd>
<dd class="uol-info-list__data ">
Language development
</dd>
<dd class="uol-info-list__data ">
Special educational needs and disability
</dd>
<dd class="uol-info-list__data ">
Inclusive education
</dd>
<dd class="uol-info-list__data ">
Classroom practice
</dd>
<dd class="uol-info-list__data ">
Teacher development and CPD
</dd>
</div>
</dl>
</div>
<div class="uol-info-list-container">
<dl class="uol-info-list uol-info-list--inline">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Email</dt>
<dd class="uol-info-list__data uol-info-list__data--email">
<a href="mailto:I.Ellis@leeds.ac.uk">I.Ellis@leeds.ac.uk</a>
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Phone</dt>
<dd class="uol-info-list__data uol-info-list__data--phone">
<a href="tel:+44(0)113 343 4433">+44(0)113 343 4433</a>
</dd>
</div>
</dl>
</div>
</li>
<li class="uol-people-profile__card uol-people-profile__card--image-layout">
<h3 class="uol-people-profile__name">
<a href="#">Tony Bailey</a>
</h3>
<img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-01.jpg" alt="Profile picture of Tony Bailey">
<strong class="uol-people-profile__position">Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education</strong>
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Areas of expertise</dt>
<dd class="uol-info-list__data ">
Deafness in childhood and young people (0-25 yrs)
</dd>
<dd class="uol-info-list__data ">
Language development
</dd>
<dd class="uol-info-list__data ">
Special educational needs and disability
</dd>
<dd class="uol-info-list__data ">
Inclusive education
</dd>
<dd class="uol-info-list__data ">
Classroom practice
</dd>
<dd class="uol-info-list__data ">
Teacher development and CPD
</dd>
</div>
</dl>
</div>
<div class="uol-info-list-container">
<dl class="uol-info-list uol-info-list--inline">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Email</dt>
<dd class="uol-info-list__data uol-info-list__data--email">
<a href="mailto:t.bailey@leeds.ac.uk">t.bailey@leeds.ac.uk</a>
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Phone</dt>
<dd class="uol-info-list__data uol-info-list__data--phone">
<a href="tel:+44(0)113 343 5000">+44(0)113 343 5000</a>
</dd>
</div>
</dl>
</div>
</li>
<li class="uol-people-profile__card uol-people-profile__card--image-layout">
<h3 class="uol-people-profile__name">
<a href="#">Quentin Perezz</a>
</h3>
<img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-02.jpg" alt="Profile picture of Quentin Perezz">
<strong class="uol-people-profile__position">Associate Professor in Social Inequalities (Teaching & Research)</strong>
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Areas of expertise</dt>
<dd class="uol-info-list__data ">
The sociology of youth and education
</dd>
<dd class="uol-info-list__data ">
Youth transitions and inequalities of class, gender and race
</dd>
<dd class="uol-info-list__data ">
Class, gender and popular culture
</dd>
</div>
</dl>
</div>
<div class="uol-info-list-container">
<dl class="uol-info-list uol-info-list--inline">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Email</dt>
<dd class="uol-info-list__data uol-info-list__data--email">
<a href="mailto:Q.Perezz@leeds.ac.uk">Q.Perezz@leeds.ac.uk</a>
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Phone</dt>
<dd class="uol-info-list__data uol-info-list__data--phone">
<a href="tel:+44(0)113 343 5000">+44(0)113 343 5000</a>
</dd>
</div>
</dl>
</div>
</li>
<li class="uol-people-profile__card uol-people-profile__card--image-layout">
<h3 class="uol-people-profile__name">
<a href="#">Logan Fox</a>
</h3>
<img class="uol-people-profile__img" src="/placeholders/ph-profile-staff-03.jpg" alt="Profile picture of Logan Fox">
<strong class="uol-people-profile__position">Head of School of Mathematics, Professor in Theoretical Physics</strong>
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Areas of expertise</dt>
<dd class="uol-info-list__data ">
Theoretical Physics
</dd>
<dd class="uol-info-list__data ">
Quantum Field Theory
</dd>
<dd class="uol-info-list__data ">
Computational Physics
</dd>
<dd class="uol-info-list__data ">
Lattice Gauge Theory
</dd>
<dd class="uol-info-list__data ">
Statistical Field Theory
</dd>
</div>
</dl>
</div>
<div class="uol-info-list-container">
<dl class="uol-info-list uol-info-list--inline">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Email</dt>
<dd class="uol-info-list__data uol-info-list__data--email">
<a href="mailto:L.Fox@leeds.ac.uk ">L.Fox@leeds.ac.uk </a>
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Phone</dt>
<dd class="uol-info-list__data uol-info-list__data--phone">
<a href="tel:+44(0)113 343 5414">+44(0)113 343 5414</a>
</dd>
</div>
</dl>
</div>
</li>
</ul>
.uol-people-profile-cards {
padding: 0;
margin: 0;
}
{
"profiles": {
"heading_level": "h3",
"items": [
{
"url": "#",
"person_name": "Isla Ellis",
"position": "Lecturer in Algebra",
"specialisms": [
{
"label": "Deafness in childhood and young people (0-25 yrs)"
},
{
"label": "Language development"
},
{
"label": "Special educational needs and disability"
},
{
"label": "Inclusive education"
},
{
"label": "Classroom practice"
},
{
"label": "Teacher development and CPD"
}
],
"email": "I.Ellis@leeds.ac.uk",
"phone": "+44(0)113 343 4433"
},
{
"img": "/placeholders/ph-profile-staff-01.jpg",
"url": "#",
"person_name": "Tony Bailey",
"position": "Associate Professor in Inclusive Education (SEND) with expertise in Deaf Education",
"specialisms": [
{
"label": "Deafness in childhood and young people (0-25 yrs)"
},
{
"label": "Language development"
},
{
"label": "Special educational needs and disability"
},
{
"label": "Inclusive education"
},
{
"label": "Classroom practice"
},
{
"label": "Teacher development and CPD"
}
],
"email": "t.bailey@leeds.ac.uk",
"phone": "+44(0)113 343 5000"
},
{
"img": "/placeholders/ph-profile-staff-02.jpg",
"url": "#",
"person_name": "Quentin Perezz",
"position": "Associate Professor in Social Inequalities (Teaching & Research)",
"specialisms": [
{
"label": "The sociology of youth and education"
},
{
"label": "Youth transitions and inequalities of class, gender and race"
},
{
"label": "Class, gender and popular culture"
}
],
"email": "Q.Perezz@leeds.ac.uk",
"phone": "+44(0)113 343 5000"
},
{
"img": "/placeholders/ph-profile-staff-03.jpg",
"url": "#",
"person_name": "Logan Fox",
"position": "Head of School of Mathematics, Professor in Theoretical Physics",
"specialisms": [
{
"label": "Theoretical Physics"
},
{
"label": "Quantum Field Theory"
},
{
"label": "Computational Physics"
},
{
"label": "Lattice Gauge Theory"
},
{
"label": "Statistical Field Theory"
}
],
"email": "L.Fox@leeds.ac.uk ",
"phone": "+44(0)113 343 5414"
}
]
}
}