People

There are four different ways of showing people in lists: - .staff-listing – default listing of academics and staff - .staff-listing min – narrow listing of academics and staff - .staff-listing-detailed – detailed list view of academics and staff - or as search results.

Staff listing

Paul Tagell, Philosopher University of Melbourne
Neil Ang, Juggling Professional University of Melbourne
Jason Smith, Coffee Drinker University of Melbourne
Andi Weis, Can eat a lot University of Melbourne
Anne Shea, Chef University of Melbourne
Carl Jackson, Crepe Expert University of Melbourne 
<table class="staff-listing">
  <tr>
    <td class="two-thirds">
      <a href="#">Paul Tagell</a>, <em>Philosopher</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
  <tr>
    <td class="two-thirds">
      <a href="#">Neil Ang</a>, <em>Juggling Professional</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
  <tr>
    <td class="two-thirds">
      <a href="#">Jason Smith</a>, <em>Coffee Drinker</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
  <tr>
    <td class="two-thirds">
      <a href="#">Andi Weis</a>, <em>Can eat a lot</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
  <tr>
    <td class="two-thirds">
      <a href="#">Anne Shea</a>, <em>Chef</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
  <tr>
    <td class="two-thirds">
      <a href="#">Carl Jackson</a>, <em>Crepe Expert</em>
    </td>
    <td class="third">
      <em>University of Melbourne</em>
    </td>
  </tr>
</table>

Staff listing min

<ul class="staff-listing min">
  <li>
    <div class="profile">
      <div class="frame">
        <img alt="Paul Tagell" src="http://placeimg.com/50/50/animals" />
      </div>
    </div>
    <div class="details">
      <a href="#">Paul Tagell</a>, <em>Philosopher</em>
    </div>
  </li>
  <li>
    <div class="profile">
      <div class="frame">
        <img alt="Neil Ang" src="http://placeimg.com/50/50/animals?1" />
      </div>
    </div>
    <div class="details">
      <a href="#">Neil Ang</a>, <em>Juggling Professional</em>
    </div>
  </li>
  <li>
    <div class="profile">
      <div class="frame">
        <img alt="Jason Smith" src="http://placeimg.com/50/50/animals?2" />
      </div>
    </div>
    <div class="details">
      <a href="#">Jason Smith</a>, <em>Coffee Drinker</em>
    </div>
  </li>
  <li>
    <div class="profile">
      <div class="frame">
        <img alt="Andi Weis" src="http://placeimg.com/50/50/animals?3" />
      </div>
    </div>
    <div class="details">
      <a href="#">Andi Weis</a>, <em>Can eat a lot</em>
    </div>
  </li>
  <li>
    <div class="profile">
      <div class="frame"></div>
    </div>
    <div class="details">
      <a href="#">Anne Shea</a>, <em>Chef</em>
    </div>
  </li>
  <li>
    <div class="profile">
      <div class="frame">
        <img alt="Carl Jackson" src="http://placeimg.com/50/50/animals?5" />
      </div>
    </div>
    <div class="details">
      <a href="#">Carl Jackson</a>, <em>Crepe Expert</em>
    </div>
  </li>
</ul>

Staff listing detailed

<p>
  Images should be square dimensions (ie. equal width and height).
</p>
<ul class="staff-listing-detailed">
  <li>
    <a href="">
      <div class="frame">
        <img alt="" class="desaturate" src="http://placeimg.com/200/200/animals" />
      </div>
      <strong>Paul Tagell</strong>
      <p>
        Philosopher
      </p>
      <p>
        <em>University of Melbourne</em>
      </p>
    </a>
  </li>
  <li>
    <a href="">
      <div class="frame">
        <img alt="" class="semi-desaturate" src="http://placeimg.com/200/200/animals?2" />
      </div>
      <strong>Neil Ang</strong>
      <p>
        Juggling Professional
      </p>
      <p>
        <em>University of Melbourne</em>
      </p>
    </a>
  </li>
  <li>
    <a href="">
      <div class="frame">
        <img alt="" src="http://placeimg.com/200/200/animals?3" />
      </div>
      <strong>Jason Smith</strong>
      <p>
        Coffee Drinker
      </p>
      <p>
        <em>University of Melbourne</em>
      </p>
    </a>
  </li>
</ul>

Profile header min

  • Person Name

    Short blurb about this person. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.

    Twitter · Find an Expert 

<header style="background-image: url(http://placeimg.com/1000/800/any);">
  <ul class="staff-listing-detailed">
    <li>
      <div class="frame">
        <img src="http://placeimg.com/200/200/people" />
      </div>
      <strong>Person Name</strong>
      <p>
        Short blurb about this person. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      </p>
      <p class="links">
        <a href="http://twitter.com">Twitter</a> · <a href="http://www.findanexpert.unimelb.edu.au/display/person443785#tab-overview">Find an Expert</a>
      </p>
    </li>
  </ul>
</header>

Profile header

If the profile photo fails to load, a fallback avatar is shown.

Chaz Batrouney

Web Producer

Project Services 

<p>
  If the profile photo fails to load, a fallback avatar is shown.
</p>
<header class="profile-header">
  <div class="profile-header__summary">
    <div class="profile-header__photo" style="background-image: url(https://findanexpert.unimelb.edu.au/pictures/thumbnail195234picture);"></div>
    <h1>
      Chaz Batrouney
    </h1>
    <p>
      <em>Web Producer</em>
    </p>
    <p>
      Project Services
    </p>
  </div>
  <div class="profile-header__info">
    <ul class="profile-header__contact">
      <li>
        <span class="icon--hide-label" data-icon="phone">Phone number</span> <a href="tel:+61383440346">+61 3 8344 0346</a>
      </li>
      <li>
        <span class="icon--hide-label" data-icon="smartphone">Mobile number</span> <a href="tel:+61408123456">+61 4 0812 3456</a>
      </li>
      <li>
        <span class="icon--hide-label" data-icon="mail">Email</span> <a href="mailto:chaz.batrouney@unimelb.edu.au">chaz.batrouney@unimelb.edu.au</a>
      </li>
      <li>
        <span data-icon="profile"></span> <a href="http://www.findanexpert.unimelb.edu.au/display/person443785#tab-overview">Find an Expert profile</a>
      </li>
    </ul>
    <ul class="profile-header__location">
      <li>
        <em>Room:</em> G16
      </li>
      <li>
        <em>Floor:</em> GR
      </li>
      <li>
        <em>Building:</em> <a href="http://www.google.com.au/maps?hl=en&q=-37.79772,144.96075">33 Lincoln Square Sth</a>
      </li>
      <li>
        <em>Campus:</em> Parkville
      </li>
    </ul>
  </div>
</header>