People Cards NEW

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 (circle)
• Full Name
• Title
• Department
• Location
• Office/Room No.
• Phone
• Email

People Cards come in three variations yielding multiple variations of possible cards:

• People Card - Standard Mode
• People Card - Standard Mode with No Photo
• Quiet People Card - Name and Title With Headshot
• Quiet People Card - Name and Title Only
• People Card - Standard Mode with Dropdown
• People Card - Standard Mode with Dropdown and No Photo
• Accordion - Standard Mode

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)

Contact boxes are designed to fit into six columns or half the content area.

Josiah Bartlet

• President of the United States

• White House
• 202-555-1234
• Email Josiah

Leo McGarry

• White House Chief of Staff

• West Wing, White House
• 202-555-5678
• Email Leo

C.J. Cregg

• Press Secretary

• White House W123
• 202-555-5678
• Email C.J.

Toby Ziegler

• Communications Director

• White House W111
• 202-555-9101
• Email Toby

Josh Lyman

• Deputy Chief of Staff

• White House W154
• 202-555-3142
• Email Josh

Sam Seaborn

• Deputy Communications Director

• White House W112
• 202-555-8257
• Email Sam

Code: Standard Mode With Photo

<div class="col-md-6">
    <div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-150">
        <div class="row">
            <div class="col-md-2 col-sm-2 hidden-xs pgs-people-card__col" style="padding-left:0px;">
                <img src="/images/josiah-bartlet.png" class="pgs-people-card__photo center-block img-circle width-50" alt="">
            </div>
            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left:0px;">
                <h3 class="pgs-people-card__name">Josiah Bartlet</h3>
                <ul class="list-unstyled">
                    <li>President of the United States</li>
                </ul>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left:0px;">
                <ul class="fa-ul">
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>White House</li>
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>202-555-1234</li>
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jbartlet@whitehouse.gov">Email Josiah</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
                

Standard Mode (Without Photo)

Josiah Bartlet

• President of the United States

• White House
• 202-555-1234
• Email Josiah

Leo McGarry

• White House Chief of Staff

• West Wing, White House
• 202-555-5678
• Email Leo

C.J. Cregg

• White House Press Secretary

• White House W123
• 202-555-9876
• Email C.J.

Toby Ziegler

• White House Communications Director

• White House W111
• 202-555-8765
• Email Toby

Josh Lyman

• Deputy Chief of Staff

• White House W154
• 202-555-4567
• Email Josh

Sam Seaborn

• Deputy Communications Director

• White House W112
• 202-555-8257
• Email Sam

Code: Standard Mode (Without Photo)

    <div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-150">
        <div class="row">
            <div class="col-md-7 col-sm-7 col-xs-6 pgs-people-card__col" style="padding-left:0px;">
                <h3 class="pgs-people-card__name">Josiah Bartlet</h3>
                <ul class="list-unstyled">
                    <li>President of the United States</li>
                </ul>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left:0px;">
                <ul class="fa-ul">
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-university"></span></span>White House</li>
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>202-555-1234</li>
                    <li><span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jbartlet@whitehouse.gov">Email Josiah</a></li>
                </ul>
            </div>
        </div>
    </div>

Quiet - Name and Title Only

Contact boxes are designed to fit into four columns or 1/3 the content area.

Josiah Bartlet

• President of the United States

Leo McGarry

• White House Chief of Staff

C.J. Cregg

• White House Press Secretary

Josh Lyman

• Deputy Chief of Staff

Toby Ziegler

• White House Communications Director

Sam Seaborn

• Deputy Communications Director

Code: Name and Title Only No Photo

<div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-150 height-sm-150">
    <div class="row">
        <div class="col-md-3 col-sm-3 hidden-xs pgs-people-card__col" style="padding-left: 0px;">
            <img src="/business-industry/sipcs/PublishingImages/josiah-bartlet.png" class="pgs-people-card__photo center-block img-circle width-50" alt="">
        </div>
        <div class="col-md-9 col-sm-9 col-xs-12 pgs-people-card__col" style="padding-left: 0px;">
            <h3 class="pgs-people-card__name">Josiah Bartlet</h3>
            <ul class="list-unstyled">
                <li>President of the United States</li>
            </ul>
        </div>
    </div>
</div>

Quiet - Name and Title Only No Photo

Code: Name and Title Only No Photo

<div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-125 height-sm-125">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 pgs-people-card__col" style="padding-left: 0px;">
            <h3 class="pgs-people-card__name">Josiah Bartlet</h3>
            <ul class="list-unstyled">
                <li>President of the United States</li>
            </ul>
        </div>
    </div>
</div>

Standard Mode With Dropdown

For instances where you need to share additional biographical information, like a faculty member or counselor.

Josiah Bartlet
President of the United States

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email Josiah

Bartlet's Specialties Specialties

• Economics
• Global Diplomacy
• Education Reform
• Health Care
• Leadership

Interests:

• History
• Theology

Leo McGarry
White House Chief of Staff

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email Leo

McGarry's Specialties Specialties

• Government Strategy
• Military Affairs
• Problem Solving
• Policy Development
• Crisis Management

Interests:

• International Relations
• Defense Policy

C.J. Cregg
White House Press Secretary

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email C.J.

Cregg's Specialties Specialties

• Media Relations
• Public Relations
• Speech Writing
• Crisis Communication
• Political Strategy

Interests:

• Journalism
• Public Affairs

Toby Ziegler
Communications Director

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email Toby

Ziegler's Specialties Specialties

• Policy Messaging
• Speech Writing
• Political Strategy
• Communication Planning
• Public Speaking

Interests:

• Political Theory
• Oratory

Josh Lyman
Deputy Chief of Staff

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email Josh

Lyman's Specialties Specialties

• Campaign Management
• Legislation Strategy
• Negotiation
• Government Operations
• Policy Development

Interests:

• American Politics
• Election Strategy

Sam Seaborn
Deputy Communications Director

• White House
• Schedule an Appointment with Nancy AbdoSchedule an Appt.
• Email Sam

Seaborn's Specialties Specialties

• Speech Writing
• Policy Messaging
• Legal Affairs

Accordion - Standard Mode

Accordions are slightly wider than the side by side version at 8 columns.

Headshot + Name/Title + Contact Info

 

Josiah Bartlet

• President of the United States

• 202-555-1234
• Email Josiah

 

Leo McGarry

• White House Chief of Staff

• 202-555-5678
• Email Leo

Code: Accordion - Standard Mode

<div class="row">
    <div class="col-sm-8">
        <div class="panel-group pgs-accordion" id="contact">
            <h3>
                <button type="button" data-target="#collapse-contact" class="bg-cgrey collapsible collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-contact">
                    <span aria-hidden="true" class="ico fas fa-chevron-circle-right"></span>Headshot + Name/Title + Contact Info
                </button>
            </h3>
            <div id="collapse-contact" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body">

                    <div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-150">
                        <div class="row">
                            <div class="col-md-2 col-sm-2 hidden-xs pgs-people-card__col" style="padding-left: 0px;">
                                <img src="/about/style/documents/pegasus/assets/josiah-bartlet.png" class="pgs-people-card__photo center-block img-circle width-50" alt=""> &nbsp;
                            </div>
                            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left: 0px;">
                                <h4 class="pgs-people-card__name">Josiah Bartlet</h4>
                                <ul class="list-unstyled">
                                    <li>President of the United States</li>
                                </ul>
                            </div>
                            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left: 0px;">
                                <ul class="fa-ul">
                                    <li>
                                        <span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>202-555-1234
                                    </li>
                                    <li>
                                        <span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:jbartlet@whitehouse.gov">Email Josiah</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="pgs-people-card pgs-people-card--quiet pgs-people-card--compact height-md-150">
                        <div class="row">
                            <div class="col-md-2 col-sm-2 hidden-xs pgs-people-card__col" style="padding-left: 0px;">
                                <img src="/about/style/documents/pegasus/assets/leo-mcgarry.png" class="pgs-people-card__photo center-block img-circle width-50" alt=""> &nbsp;
                            </div>
                            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left: 0px;">
                                <h4 class="pgs-people-card__name">Leo McGarry</h4>
                                <ul class="list-unstyled">
                                    <li>White House Chief of Staff</li>
                                </ul>
                            </div>
                            <div class="col-md-5 col-sm-5 col-xs-6 pgs-people-card__col" style="padding-left: 0px;">
                                <ul class="fa-ul">
                                    <li>
                                        <span class="fa-li"><span aria-hidden="true" class="ico fas fa-phone"></span></span>202-555-5678
                                    </li>
                                    <li>
                                        <span class="fa-li"><span aria-hidden="true" class="ico fas fa-envelope"></span></span><a href="mailto:lmcgarry@whitehouse.gov">Email Leo</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>