New College of Florida Component Library

Person Standalone 

<div class="person_list">

    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-push-1">

            <div class="person_list_inner">

                <div class="person_list_header">
                    <h2 class="person_list_title">Contact Us</h2>
                </div>

                <div class="person_list_body">
                    <div class="person_list_item has_image">
                        <div class="person_list_item_detail person_list_item_meta">
                            <a href="#" class="person_list_item_name"><span class="person_list_item_name_label">Barbara Hicks</span><span class="person_list_item_name_icon_inner"><span class="digest_item_title_link_icon_space">&#xFEFF;</span><span class="person_list_item_name_icon">
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span></span></a>
                            <span class="person_list_item_title">Chair, Division of Social Sciences <br />Second Title</span>
                        </div>
                        <div class="person_list_item_detail person_list_item_image">
                            <span class="lazy_image_wrapper person_list_item_image_wrapper">
                                <img class="js-lazy js-lazyload person_list_item_image" src="//images.fastspot.com/new-college-of-florida/100x100/2" data-src="//images.fastspot.com/new-college-of-florida/100x100/2" alt="">
                            </span>
                            <noscript>
                                <img class="person_list_item_image" src="https://images.fastspot.com/new-college-of-florida/100x100/2" alt="">
                            </noscript>
                        </div>
                        <div class="person_list_item_group">
                            <div class="person_list_item_detail person_list_item_contact">
                                <span class="person_list_item_hint">Contact</span>
                                <a href="tel:(941) 487-4373" class="person_list_item_phone">(941) 487-4373</a>
                                <a href="mailto:bhicks@ncf.edu" class="person_list_item_email">bhicks@ncf.edu</a>
                                <a href="https://google.com" class="person_list_item_meeting_link">Schedule a Meeting</a>
                            </div>
                            <div class="person_list_item_detail person_list_item_departments">
                                <span class="person_list_item_hint">Office or Division</span>
                                <a href="#" class="person_list_item_department_link">Social Sciences</a>
                                <span class="person_list_item_hint program_section">Area of Concentration</span>
                                <a href="#" class="person_list_item_department_link">Psychology</a>
                            </div>
                        </div>
                    </div>
                    <div class="person_list_item">
                        <div class="person_list_item_detail person_list_item_meta">
                            <a href="#" class="person_list_item_name"><span class="person_list_item_name_label">Barbara Dubreuil</span><span class="person_list_item_name_icon_inner"><span class="digest_item_title_link_icon_space">&#xFEFF;</span><span class="person_list_item_name_icon">
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span></span></a>
                            <span class="person_list_item_title">Coordinator of Library Operations</span>
                        </div>
                        <div class="person_list_item_detail person_list_item_image">
                        </div>
                        <div class="person_list_item_group">
                            <div class="person_list_item_detail person_list_item_contact">
                                <span class="person_list_item_hint">Contact</span>
                                <a href="tel:(941) 487-4373" class="person_list_item_phone">(941) 487-4373</a>
                                <a href="mailto:bdubreuil@ncf.edu" class="person_list_item_email">bdubreuil@ncf.edu</a>
                                <a href="https://google.com" class="person_list_item_meeting_link">Schedule a Meeting</a>
                            </div>
                            <div class="person_list_item_detail person_list_item_departments">
                                <span class="person_list_item_hint">Office or Division</span>
                                <a href="#" class="person_list_item_department_link">Library</a>
                            </div>
                        </div>
                    </div>
                    <div class="person_list_item">
                        <div class="person_list_item_detail person_list_item_meta">
                            <a href="#" class="person_list_item_name"><span class="person_list_item_name_label">Barbara Feldman</span><span class="person_list_item_name_icon_inner"><span class="digest_item_title_link_icon_space">&#xFEFF;</span><span class="person_list_item_name_icon">
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span></span></a>
                            <span class="person_list_item_title">Professor of Sociology</span>
                        </div>
                        <div class="person_list_item_detail person_list_item_image">
                        </div>
                        <div class="person_list_item_group">
                            <div class="person_list_item_detail person_list_item_contact">
                                <span class="person_list_item_hint">Contact</span>
                                <a href="tel:(941) 487-4373" class="person_list_item_phone">(941) 487-4373</a>
                                <a href="mailto:bfeldman@ncf.edu" class="person_list_item_email">bfeldman@ncf.edu</a>
                                <a href="https://google.com" class="person_list_item_meeting_link">Schedule a Meeting</a>
                            </div>
                            <div class="person_list_item_detail person_list_item_departments">
                                <span class="person_list_item_hint">Office or Division</span>
                                <a href="#" class="person_list_item_department_link">Social Sciences</a>
                                <span class="person_list_item_hint program_section">Area of Concentration</span>
                                <a href="#" class="person_list_item_department_link">Anthropology</a>
                                <a href="#" class="person_list_item_department_link">Psychology</a>
                                <a href="#" class="person_list_item_department_link">Psychiatry</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
 
<div class="person_list">

	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-push-1">

			<div class="person_list_inner">

				{% if title %}
				<div class="person_list_header">
					<h2 class="person_list_title">{{ title }}</h2>
				</div>
				{% endif %}

				{% if items %}
				<div class="person_list_body">
					{% for item in items %}
						<div class="person_list_item{% if item.image %} has_image{% endif %}">
							<div class="person_list_item_detail person_list_item_meta">
								<a href="#" class="person_list_item_name"><span class="person_list_item_name_label">{{ item.name }}</span><span class="person_list_item_name_icon_inner"><span class="digest_item_title_link_icon_space">&#xFEFF;</span><span class="person_list_item_name_icon">{{ icon("arrow_right") }}</span></span></a>
								<span class="person_list_item_title">{{ item.title }}{% if item.title2 %} <br/>{{ item.title2 }}{% endif %}</span>
							</div>
							<div class="person_list_item_detail person_list_item_image">
								{% if item.image %}
									{% include "@partial-image" with {
										class: "person_list_item",
										alt: "",
										image: item.image,
										sources: [
											img.square.thumb
										]
									} %}
								{% endif %}
							</div>
							<div class="person_list_item_group">
								{% if item.phone or item.email %}
								<div class="person_list_item_detail person_list_item_contact">
									<span class="person_list_item_hint">Contact</span>
									{% if item.phone %}
										<a href="tel:{{ item.phone }}" class="person_list_item_phone">{{ item.phone }}</a>
									{% endif %}
									{% if item.email %}
										<a href="mailto:{{ item.email }}" class="person_list_item_email">{{ item.email }}</a>
									{% endif %}
									{% if item.meeting %}
										<a href="{{ item.meeting }}" class="person_list_item_meeting_link">Schedule a Meeting</a>
									{% endif %}
								</div>
								{% endif %}
								{% if item.departments or item.programs %}
								<div class="person_list_item_detail person_list_item_departments">
									{% if item.departments %}
										<span class="person_list_item_hint">Office or Division</span>
										{% for department in item.departments %}
											<a href="#" class="person_list_item_department_link">{{ department }}</a>
										{% endfor %}
									{% endif %}
									{% if item.programs %}
										<span class="person_list_item_hint program_section">Area of Concentration</span>
										{% for program in item.programs %}
											<a href="#" class="person_list_item_department_link">{{ program }}</a>
										{% endfor %}
									{% endif %}
								</div>
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
				{% endif %}
			</div>

		</div>
	</div>

</div>

No notes defined.