CCGA Component Library

People List Item

300 × 150 
<div class="people_list_item">
    <div class="people_list_item_grid">
        <div class="people_list_item_grid_item is_top">
            <div class="people_list_item_header">
                <div class="people_list_item_figure_wrap">
                    <figure class="people_list_item_figure">
                        <span class="lazy_image_wrapper people_list_item_image_wrapper">
                            <img class="js-lazy js-lazyload people_list_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/100x100/" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/100x100/ 100w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x300/ 300w" alt=" headshot">
                        </span>
                        <noscript>
                            <img class="people_list_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x300/" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x300/ 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/100x100/ 100w" sizes="100vw" alt=" headshot">
                        </noscript>
                    </figure>
                </div>

                <div class="people_list_item_meta_wrap">
                    <h2 class="people_list_item_name">
                        <a href="" class="people_list_item_name_link">

                        </a>
                    </h2>

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

        <div class="people_list_item_grid_item is_bottom">
            <div class="people_list_item_contact_wrap">
                <div class="people_list_item_contact_rows">

                    <div class="people_list_item_contact_row">
                        <div class="people_list_item_contact_label">

                        </div>

                        <div class="people_list_item_contact_value">
                            <a href="mailto:" class="people_list_item_contact_link">
                                Send a Message or Question
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set heading_element = has_title ? "h3" : "h2" %}

<div class="people_list_item">
	<div class="people_list_item_grid">
		<div class="people_list_item_grid_item is_top">
			<div class="people_list_item_header">
				<div class="people_list_item_figure_wrap">
					<figure class="people_list_item_figure">
						{% include "@partial-image" with {
							class: "people_list_item",
							alt: item.name.name ~ " headshot",
							image: item.image,
							sources: [
								img.square.xxsml,
								img.square.thumb
							]
						} %}
					</figure>
				</div>

				<div class="people_list_item_meta_wrap">
					<{{ heading_element }} class="people_list_item_name">
						<a href="{{ item.name.href }}" class="people_list_item_name_link">
							{{ item.name.name }}
						</a>
					</{{ heading_element }}>

					{% if item.title %}
						<div class="people_list_item_title">
							{{ item.title }}
						</div>
					{% endif %}
				</div>
			</div>
		</div>

		<div class="people_list_item_grid_item is_bottom">
			<div class="people_list_item_contact_wrap">
				<div class="people_list_item_contact_rows">
					{% if item.social %}
						<div class="people_list_item_contact_row">
							<div class="people_list_item_contact_label">
								{{ item.social.label }}
							</div>

							<div class="people_list_item_contact_value">
								<div class="people_list_item_social_list">
									{% for social_item in item.social.items %}
										<div class="people_list_item_social_list_item">
											<a class="people_list_item_social_list_link" href="{{ social_item.href }}" aria-label="{{ social_item.name }}">
												<div class="people_list_item_social_list_icon">
													{{ icon(social_item.icon) }}
												</div>
											</a>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>
					{% endif %}
					
					<div class="people_list_item_contact_row">
						<div class="people_list_item_contact_label">
							{{ item.contact.label }}
						</div>

						<div class="people_list_item_contact_value">
							<a href="mailto:{{ item.contact.email }}" class="people_list_item_contact_link">
								{% if item.contact.type == "email" %}
									{{ item.contact.email }}
								{% else %}
									Send a Message or Question
								{% endif %}
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.