Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Personal Bio Cards

A Personal Bio Card is an element that combines a photo of a person with personal and contact information about that person. The photo is left-aligned on the page with the information to the right of it. The information typically starts with the persons name and usually contains contact information such as a phone number and email address, although it could incorporate much more than that, including office hours, personal web page link, job duties, etc.

This type of element is used widely across the site, and the methods for achieving the effect vary widely. Many methods are less than ideal so we have created a style for adding Personal Bio Cards to your pages in a consistent way.

To create a Personal Bio Card:

  • Create a <div> with a class of "bioCard"
  • Add a personal photo within the newly created <div>
  • Add another <div> within the current one with a class of "bioInfo"
  • Add the person’s name and other personal information within the bioInfo <div>
<div class="bioCard">
    <img src="/services/web_services/images/carey.gif" width="105" height="144" alt="Carey Taylor" />
    <div class="bioInfo">
        <h4>Carey Taylor</h4>
        <p>Web and Multimedia Services Analyst <br/>
        MCS-111 C<br/>
        (325) 942-2334 ext. 6259<br />
        <a href="mailto:carey.taylor@angelo.edu" class="mail">carey.taylor@angelo.edu</a></p>
    </div>
</div>

Carey Taylor

Web and Multimedia Services Analyst
MCS-111 C
(325) 942-2334 ext. 6259
carey.taylor@angelo.edu

Continue this process to add more “cards” to the page.

<div class="bioCard">
    <img src="/services/web_services/images/carey.gif" width="105" height="144" alt="Carey Taylor" />
    <div class="bioInfo">
        <h4>Carey Taylor</h4>
        <p>Web and Multimedia Services Analyst <br/>
        MCS-111 C<br/>
        (325) 942-2334 ext. 6259<br />
        <a href="mailto:carey.taylor@angelo.edu" class="mail">carey.taylor@angelo.edu</a></p>
    </div>
</div>
<div class="bioCard">
    <img src="/services/web_services/images/jon.gif" width="105" height="144" alt="Jon Wilcox" />
    <div class="bioInfo">
        <h4>Jon Wilcox</h4>
        <p>Web Development Specialist<br/>
        MCS-109 A<br/>
        (325) 942-2334 ext. 6266<br />
        <a href="mailto:jon.wilcox@angelo.edu" class="mail">jon.wilcox@angelo.edu</a></p>
    </div>
</div>

Carey Taylor

Web and Multimedia Services Analyst
MCS-111 C
(325) 942-2334 ext. 6259
carey.taylor@angelo.edu

image

Jon Wilcox

Web Development Specialist
MCS-109 A
(325) 942-2334 ext. 6266
jon.wilcox@angelo.edu