Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

People Cards

People Cards are components used to identify contact information for people (as opposed to departments).

They are designed to display the following points of information for individuals:

  • Headshot (square)
  • Full Name
  • Title
  • Department
  • Location
  • Office/Room No.
  • Phone
  • Email

People Cards come in two sizes and two modes– yielding four variations of possible cards:

Proper Use: Which People Card To Use

Here are some guidelines about when to use which card:

  • If you are listing a stand-alone person (and have all of their contact info including: title, dept, location, office, phone, email and photo), use Standard Mode (Full).
  • If you are listing multiple people from different areas or de​partments (and have all the listed contact info above), use Quiet Mode (Full).
  • If you are listing a single person and only have their basic contact info and no photo, use Standard Mode (Compact)
  • If you are listing multiple people from a single area or department, use Quiet Mode (Compact).
 

Standard Mode (Full)

Jonathan Blundell

  • Senior Managing Director, Digital Communications
  • Public and Governmental Affairs

Jonathan Blundell

  • Senior Managing Director, Digital Communications
  • Public and Governmental Affairs

Without Photo

<div class="pgs-people-card">
  <div class="row">
    <div class="col-md-2 hidden-xs col-sm-3">
      <div class="pgs-people-card__photo center-block"><span class="pgs-people-card__initials">JB</span></div>
    </div>
    <div class="col-md-6 col-sm-9 pgs-people-card__col">
      <h2 class="pgs-people-card__name">Jonathan Blundell</h2>
      <ul class="list-unstyled">
        <li>Senior Managing Director, Digital Communications</li>
        <li>Public and Governmental Affairs</li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-9 col-sm-offset-3 col-md-offset-0 pgs-people-card__col">
      <ul class="fa-ul">
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span>Administrative Office</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>Office 335</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>214-860-1892</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jblundell@dcccd.edu">Email Jonathan</a></li>
      </ul>
    </div>
  </div>
</div>

With Photo

 <div class="pgs-people-card">
   <div class="row">
      <div class="col-md-2 hidden-xs col-sm-3">
         <img src="https://via.placeholder.com/100" class="pgs-people-card__photo center-block" alt=""></img>
      </div>
      <div class="col-md-6 col-sm-9 pgs-people-card__col">
         <h2 class="pgs-people-card__name">Jonathan Blundell</h2>
         <ul class="list-unstyled">
            <li>Senior Managing Director, Digital Communications</li>
            <li>Public and Governmental Affairs</li>
         </ul>
      </div>
      <div class="col-md-4 col-sm-9 col-sm-offset-3 col-md-offset-0 pgs-people-card__col">
         <ul class="fa-ul">
            <li>
               <span class="fa-li">
                  <span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span>Administrative Office</li>
            <li>
               <span class="fa-li">
                  <span aria-hidden="true" class="ico fas fa-university"></span></span>Office 335</li>
            <li>
               <span class="fa-li">
                  <span aria-hidden="true" class="ico fas fa-phone"></span></span>214-860-1892</li>
            <li>
               <span class="fa-li">
                  <span aria-hidden="true" class="ico fas fa-envelope"></span></span>
               <a href="mailto:jblundell@dcccd.edu">Email Jonathan</a></li>
         </ul>
      </div>
   </div>
</div>
 

Quiet Mode (Full)

Jonathan Blundell

  • Senior Managing Director, Digital Communications
  • Public and Governmental Affairs
<div class="pgs-people-card pgs-people-card--quiet">
  <div class="row">
    <div class="col-md-2 hidden-xs col-sm-3">
      <div class="pgs-people-card__photo center-block"><span class="pgs-people-card__initials">JB</span></div>
    </div>
    <div class="col-md-6 col-sm-9 pgs-people-card__col">
      <h2 class="pgs-people-card__name">Jonathan Blundell</h2>
      <ul class="list-unstyled">
        <li>Senior Managing Director, Digital Communications</li>
        <li>Public and Governmental Affairs</li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-9 col-sm-offset-3 col-md-offset-0 pgs-people-card__col">
      <ul class="fa-ul">
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-map-marker-alt"></span></span>Administrative Office</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>Office 335</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>214-860-1892</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jblundell@dcccd.edu">Email Jonathan</a></li>
      </ul>
    </div>
  </div>
</div>
 

Standard Mode (Compact)

Compact People Cards are smaller and lighter than the full size. They only offer space for the following:

  • Full name
  • Job title
  • Phone number
  • Email address

Jonathan Blundell

  • Senior Managing Director, Digital Communications
<div class="pgs-people-card pgs-people-card--compact">
  <div class="row">
    <div class="col-md-8 pgs-people-card__col">
      <h2 class="pgs-people-card__name">Jonathan Blundell</h2>
      <ul class="list-unstyled">
        <li>Senior Managing Director, Digital Communications</li>
      </ul>
    </div>
    <div class="col-md-4 pgs-people-card__col">
      <ul class="fa-ul">
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>214-860-1892</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jblundell@dcccd.edu">Email Jonathan</a></li>
      </ul>
    </div>
  </div>
</div>
 

Quiet Mode (Compact)

Jonathan Blundell

  • Senior Managing Director, Digital Communications
<div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact">
  <div class="row">
    <div class="col-md-8 pgs-people-card__col">
      <h2 class="pgs-people-card__name">Jonathan Blundell</h2>
      <ul class="list-unstyled">
        <li>Senior Managing Director, Digital Communications</li>
      </ul>
    </div>
    <div class="col-md-4 pgs-people-card__col">
      <ul class="fa-ul">
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>214-860-1892</li>
        <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jblundell@dcccd.edu">Email Jonathan</a></li>
      </ul>
    </div>
  </div>
</div>
 

Components