Profile Styles

Profile with Image

Firstname Surname
Firstname Surname
Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

Firstname Surname

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

  • List item
                        <article class="profile profile--image">
                            <div class="profile__photo">
                                <img src="https://gem.mq.edu.au/images/profile-placeholder.png" alt="Firstname Surname">
                            </div>
                            <div class="profile__details">
                                <div class="profile__header">
                                    <h5 class="profile__name">Firstname Surname</h5>
                                    <h6 class="profile__position">Job Title</h6>
                                </div>
                                <div class="profile__description">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus,
                                        fringilla hendrerit
                                        magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.</p>
                                </div>
                                <div class="profile__contact">
                                    <ul>
                                        <li class="profile__contact--phone">
                                            <i class="ico ico--f-phone"></i>
                                            +61 0 0000 0000
                                        </li>
                                        <li class="profile__contact--email">
                                            <i class="ico ico--f-mail"></i>
                                            <a href="mailto:email.address@mq.edu.au">email.address@mq.edu.au</a>
                                        </li>
                                        <li class="profile__contact--address">
                                            <i class="ico ico--f-location"></i>
                                            A1A-123
                                        </li>
                                    </ul>
                                </div>
                                <div class="profile__footer">
                                    <a href="#" class="link--cta">Learn More</a>
                                </div>
                            </div>
                        </article>
                    

Profile List

Firstname Surname
School of Psychological Sciences
Firstname Surname
School of Psychological Sciences
Firstname Surname
School of Psychological Sciences
Firstname Surname
Firstname Surname
Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

Smart Technologies
Firstname Surname
Firstname Surname
Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

Firstname Surname

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

  • List item
Firstname Surname
School of Psychological Sciences
Firstname Surname
School of Psychological Sciences
Smart Technologies
Firstname Surname
Firstname Surname
Job Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

Firstname Surname

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus ligula purus, fringilla hendrerit magna eleifend sed. Aenean et eleifend dui. Suspendisse sapien turpis.

  • List item
Firstname Surname
School of Psychological Sciences
Firstname Surname
School of Psychological Sciences
                        <div class="profile profile--list">
                            <div class="profile__header">
                                <h5 class="profile__name">Firstname Surname</h5>
                            </div>
                            <div class="profile__contact">
                                <ul>
                                    <li class="profile__contact--phone">
                                        <i class="ico ico--f-phone"></i>
                                        +61 0 0000 0000
                                    </li>
                                    <li class="profile__contact--email">
                                        <i class="ico ico--f-mail"></i>
                                        <a href="mailto:email.address@mq.edu.au">email.address@mq.edu.au</a>
                                    </li>
                                    <li class="profile__contact--address">
                                        <i class="ico ico--f-location"></i>
                                        A1A-123
                                    </li>
                                </ul>
                            </div>
                        </div>
                    

Profile Documentation

Use

Upload profile images as squares.