Staff profile
The staff profile pattern is used to display information about an individual with an emphasis on the role and biography. This pattern includes a short biography excerpt, contact details, and an optional link to each staff member’s full biography page. If the emphasis is instead to provide contact details then the Contact Card pattern should be considered.
Rules for staff profiles
- Must only be used in the main body of the page.
- The biography excerpt must not exceed 550 characters.
- If a biography excerpt exceeds 550 characters, and there is a user case to include all information, then a standalone biography page should be considered as an alternative.
- The profile image must be 200 × 200 pixels.
- Photographs must be headshots of the individual named in the card and of professional quality.
- The heading link and the full biography link must link to the same page.
- Contact information should be present if available.
Options available
Staff profile - default
The call-to-action link is also included in the profile heading.
Team leader
Finn Camacho
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
Full biography
- Email:
- example@st-andrews.ac.uk
- Phone:
- +44 (0)1334 46 xxxx
<!-- Begin pattern: staff-profile //-->
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading"><a href="#">Team leader</a></h3>
<h4 class="staff-profile__subheading">Finn Camacho</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
<br><a href="#">Full biography</a>
</p>
</div>
<div class="staff-profile__image">
<img src="../../assets/docs/images/placeholders/200x200.jpg" alt="placeholder">
</div>
<div class="staff-profile__contact">
<dl class="paired-values-list">
<dt class="paired-values-list__name selected">Email:</dt>
<dd class="paired-values-list__value"><a href="mailto:#">example@st-andrews.ac.uk</a></dd>
<dt class="paired-values-list__name selected">Phone:</dt>
<dd class="paired-values-list__value">+44 (0)1334 46 xxxx</dd>
</dl>
</div>
</div>
<!-- End pattern: staff-profile //-->
Staff profile - without link to biography
Without a link to a biography, there is also no link on the heading.
Accountant
Airi Satou
Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
- Email:
- example@st-andrews.ac.uk
- Phone:
- +44 (0)1334 46 xxxx
<!-- Begin pattern: staff-profile //-->
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading">Accountant</h3>
<h4 class="staff-profile__subheading">Airi Satou</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
</p>
</div>
<div class="staff-profile__image">
<img src="../../assets/docs/images/placeholders/200x200.jpg" alt="placeholder">
</div>
<div class="staff-profile__contact">
<dl class="paired-values-list">
<dt class="paired-values-list__name selected">Email:</dt>
<dd class="paired-values-list__value"><a href="mailto:#">example@st-andrews.ac.uk</a></dd>
<dt class="paired-values-list__name selected">Phone:</dt>
<dd class="paired-values-list__value">+44 (0)1334 46 xxxx</dd>
</dl>
</div>
</div>
<!-- End pattern: staff-profile //-->
Staff profile - minimum
This is the minimum required content for a staff profile.
JavaScript developer
Colleen Hurst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
<!-- Begin pattern: staff-profile //-->
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading">JavaScript developer</h3>
<h4 class="staff-profile__subheading">Colleen Hurst</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
</p>
</div>
</div>
<!-- End pattern: staff-profile //-->
Staff profile list
Profiles can be combined to form a list.
Team leader
Finn Camacho
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
Full biography
- Email:
- example@st-andrews.ac.uk
- Phone:
- +44 (0)1334 46 xxxx
Accountant
Airi Satou
Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
- Email:
- example@st-andrews.ac.uk
- Phone:
- +44 (0)1334 46 xxxx
JavaScript developer
Colleen Hurst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
<!-- Begin pattern: staff-profile //-->
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading"><a href="#">Team leader</a></h3>
<h4 class="staff-profile__subheading">Finn Camacho</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
<br><a href="#">Full biography</a>
</p>
</div>
<div class="staff-profile__image">
<img src="../../assets/docs/images/placeholders/200x200.jpg" alt="placeholder">
</div>
<div class="staff-profile__contact">
<dl class="paired-values-list">
<dt class="paired-values-list__name selected">Email:</dt>
<dd class="paired-values-list__value"><a href="mailto:#">example@st-andrews.ac.uk</a></dd>
<dt class="paired-values-list__name selected">Phone:</dt>
<dd class="paired-values-list__value">+44 (0)1334 46 xxxx</dd>
</dl>
</div>
</div>
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading">Accountant</h3>
<h4 class="staff-profile__subheading">Airi Satou</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
</p>
</div>
<div class="staff-profile__image">
<img src="../../assets/docs/images/placeholders/200x200.jpg" alt="placeholder">
</div>
<div class="staff-profile__contact">
<dl class="paired-values-list">
<dt class="paired-values-list__name selected">Email:</dt>
<dd class="paired-values-list__value"><a href="mailto:#">example@st-andrews.ac.uk</a></dd>
<dt class="paired-values-list__name selected">Phone:</dt>
<dd class="paired-values-list__value">+44 (0)1334 46 xxxx</dd>
</dl>
</div>
</div>
<div class="staff-profile">
<div class="staff-profile__details">
<h3 class="staff-profile__heading">JavaScript developer</h3>
<h4 class="staff-profile__subheading">Colleen Hurst</h4>
<p class="staff-profile__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.
</p>
</div>
</div>
<!-- End pattern: staff-profile //-->