For when we need to show a list of people, for staff listings.

Simplest example

An UOY Employee

<div class="c-person">

  <div class="c-person__image">
  </div>
  <div class="c-person__name">
    <h3>An UOY Employee</h3>
  </div>

</div>

Complete example

Another UOY Employee

Lecturer in Digital Creativity

Discipline: Theatre, film, television and interactive media

an.other@york.ac.uk

+44 +44 (0) 1904 320 000

TFTV/005

Research interests:

Interactive media art, interaction design, theory and aesthetics of digital media; affordance, embodiment, memory; sound art, interactive sonification, sound design, listening practices, sonic memories; design of digital music instruments, live electronics and live coding, acousmatic composition, film music.

<div class="c-person">

  <div class="c-person__image">
    <img src="data:image/png;base64,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" width="200" height="200" alt="">
  </div>
  <div class="c-person__name">
    <h3><a class="person__link" href="#">Another UOY Employee</a></h3>
  </div>
  <div class="c-person__meta">
    <p><strong>Lecturer in Digital Creativity</strong></p>
    <p>Discipline: Theatre, film, television and interactive media</p>
  </div>
  <div class="c-person__contact">
    <p><i class="c-icon c-icon--before c-icon--envelope" aria-hidden="true"></i><a href="mailto:{c-personEmail}">an.other@york.ac.uk</a></p>
    <p><i class="c-icon c-icon--before c-icon--phone" aria-hidden="true"></i><a href="tel:+44 {c-personPhone}">+44 +44 (0) 1904 320 000</a></p>
    <p><i class="c-icon c-icon--before c-icon--map-marker" aria-hidden="true"></i>TFTV/005</p>
  </div>
  <div class="c-person__content">
    <p><strong>Research interests:</strong></p>
    <p>Interactive media art, interaction design, theory and aesthetics of digital media; affordance, embodiment, memory; sound art, interactive sonification, sound design, listening practices, sonic memories; design of digital music instruments, live electronics and live coding, acousmatic composition, film music.</p>
  </div>
</div>

Options

  • person
    • personName: full name of the staff member (required)
    • personRole: role held by the staff member (optional)
    • personDisciplines: disciplines that the staff member specialises in (optional)
    • personEmail: rmail address of the staff member (optional)
    • personPhone: phone number of the staff member (optional)
    • personLocation: office location of the staff member (optional)
    • personInterests: research interests of the staff member (optional)