Featured people

The featured people pattern allows University academics, staff, and students to be prominently included on a webpage. This is used to link to work or research profiles of noteable people affiliated with the University of St Andrews.

Rules for featured people

This pattern should only appear once on a web page.
The background colour must be white or light grey, using the class sta-light-grey.
Padding must be added at the top of the pattern, using the class padding-top, if the light grey background is added.
The heading for the section is optional.
The image and name of a featured person must link to the same web page.
Linked web pages must open in the same tab.
Section title must not exceed 50 characters.
Featured images must be 180 by 180 pixels.
Featured images must be a high quality portraiture headshot of the named person.
It is recommended that featured people's names must not exceed 50 characters in length.
It is recommended that featured people's title must not exceed 70 characters in length.
Description character count must not exceed 300 characters.

Three profiles with descriptions

Example

Featured academics

Professor Sophia Adams

Structural Biologist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Aiden Davis

School of English

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Olivia Evans

Senior Lecturer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Code

<!-- Begin pattern: featured people //-->
<section class="featured-people">
    <div class="container">
        <h2>Featured academics</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="featured-people__person">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/female-001.jpg' alt="Professor Sophia Adams">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Professor Sophia Adams</a></h3>
                        <h4 class="featured-people__title">Structural Biologist</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos. </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/male-001.jpg' alt="Aiden Davis">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Aiden Davis</a></h3>
                        <h4 class="featured-people__title">School of English</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos. </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/female-002.jpg' alt="Olivia Evans">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Olivia Evans</a></h3>
                        <h4 class="featured-people__title">Senior Lecturer</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: featured people  //-->

Grid of profiles

This example shows a grid of featured people without linking to further information. A light grey background has been added, with additional padding at the top.

Example

Dr Garrett Winters

School of Biology

Dr Rhona Davidson

School of Medicine

Brielle Williamson

PhD student

Professor Sophia Adams

Structural Biologist

Aiden Davis

School of English

Olivia Evans

Senior Lecturer

Code

<!-- Begin pattern: featured people //-->
<section class="featured-people padding-top sta-grey-light">
    <div class="container">

        <div class="row">
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/docs/images/profile-pictures/male-002.jpg' alt="Dr Garrett Winters">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Dr Garrett Winters</h3>
                        <h4 class="featured-people__title">School of Biology</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/core/images/featured-people.png' alt="Dr Rhona Davidson">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Dr Rhona Davidson</h3>
                        <h4 class="featured-people__title">School of Medicine</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/docs/images/profile-pictures/female-003.jpg' alt="Brielle Williamson">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Brielle Williamson</h3>
                        <h4 class="featured-people__title">PhD student</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/docs/images/profile-pictures/female-001.jpg' alt="Professor Sophia Adams">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Professor Sophia Adams</h3>
                        <h4 class="featured-people__title">Structural Biologist</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/docs/images/profile-pictures/male-001.jpg' alt="Aiden Davis">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Aiden Davis</h3>
                        <h4 class="featured-people__title">School of English</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="featured-people__person">
                    <div class="featured-people__image">    
                        <img src='../../assets/docs/images/profile-pictures/female-002.jpg' alt="Olivia Evans">
                    </div>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name">Olivia Evans</h3>
                        <h4 class="featured-people__title">Senior Lecturer</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: featured people  //-->

Two profiles with indented descriptions

The descriptions can be indented by adding the class featured-people__person--indented.

This class must only be used when a person has a description.
If used then all persons in the current block must also have indented descriptions.
Must not be used when more than two Featured People are on a single row.

Example

Student participants

Ashton Cox

Student

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Olivia Liang

Student

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Code

<!-- Begin pattern: featured people //-->
<section class="featured-people">
    <div class="container">
        <h2>Student participants</h2>
        <div class="row">
            <div class="col-md-6">
                <div class="featured-people__person featured-people__person--indent">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/male-004.jpg' alt="Ashton Cox">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Ashton Cox</a></h3>
                        <h4 class="featured-people__title">Student</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="featured-people__person featured-people__person--indent">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/female-003.jpg' alt="Olivia Liang">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Olivia Liang</a></h3>
                        <h4 class="featured-people__title">Student</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: featured people  //-->

One profile with indented description

The descriptions can be indented by adding the class featured-people__person--indented.

This class must only be used when a person has a description.
If used then all persons in the current block must also have indented descriptions.
Must not be used when more than two Featured People are on a single row.

Example

About the author

Professor Sonya Frost

Theoretical Physicist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.

Code

<!-- Begin pattern: featured people //-->
<section class="featured-people">
    <div class="container">
        <h2>About the author</h2>
        <div class="row">
            <div class="col-xs-12">
                <div class="featured-people__person featured-people__person--indent">
                    <a href="#" class="featured-people__image" tabindex="-1">    
                        <img src='../../assets/docs/images/profile-pictures/female-002.jpg' alt="Professor Sonya Frost">
                    </a>
                    <div class="featured-people__person--group">
                        <h3 class="featured-people__name"><a href="#">Professor Sonya Frost</a></h3>
                        <h4 class="featured-people__title">Theoretical Physicist</h4>
                    </div>
                    <div class="featured-people__description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: featured people  //-->