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>