<div class="tabbed_people js-tabbed-people">
    <div class="tabbed_people_inner">
        <div class="tabbed_people_header">
            <div class="fs-row">
                <div class="fs-cell fs-lg-10 fs-lg-push-1 fs-xl-8 fs-xl-push-2">
                    <h2 class="tabbed_people_header_title">Our People</h2>
                    <ul class="tabbed_people_controller">
                        <li class="tabbed_people_toggle_item">
                            <button class="tabbed_people_toggle_button js-tabbed-people-toggle-button js-swap" role="button" data-swap-target=".js-tabbed-people-panel-1" data-swap-group="people_group" data-swap-options='{"collapse": false}' data-swap-active="true">Steering Committee & Staff</button>
                        </li>
                        <li class="tabbed_people_toggle_item">
                            <button class="tabbed_people_toggle_button js-tabbed-people-toggle-button js-swap" role="button" data-swap-target=".js-tabbed-people-panel-2" data-swap-group="people_group" data-swap-options='{"collapse": false}'>Core Faculty</button>
                        </li>
                    </ul>
                    <label for="tab-select" class="tabbed_people_mobile_controller_label">Select an option</label>
                    <select name="tab-select" id="tab-select" class="tabbed_people_mobile_controller js-tabbed-people-select">
                        <option value=".js-tabbed-people-panel-1" class="tabbed_people_mobile_controller_option">Steering Committee & Staff</option>
                        <option value=".js-tabbed-people-panel-2" class="tabbed_people_mobile_controller_option">Core Faculty</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="tabbed_people_panels">
            <div class="fs-row">
                <div class="fs-cell fs-xl-10 fs-xl-push-1">
                    <div class="tabbed_people_panel tabbed_people_panel_1 js-tabbed-people-panel js-tabbed-people-panel-1">
                        <ul class="tabbed_people_panel_list">
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/1" data-src="//images.fastspot.com/new-college-of-florida/300x300/1" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/1 300w, //images.fastspot.com/new-college-of-florida/100x100/1 100w" alt="image of Amy Reid">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/1" srcset="https://images.fastspot.com/new-college-of-florida/100x100/1 100w, https://images.fastspot.com/new-college-of-florida/300x300/1 300w" sizes="100vw" alt="image of Amy Reid">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Amy Reid</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Program Director</span>
                                    <span class="tabbled_people_panel_person_second_title">Second Title</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person">
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Emily Fairchild</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Program Advisor and Social Sciences Representative</span>
                                    <span class="tabbled_people_panel_person_second_title">Second Title</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/3" data-src="//images.fastspot.com/new-college-of-florida/300x300/3" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/3 300w, //images.fastspot.com/new-college-of-florida/100x100/3 100w" alt="image of Katherine Brion">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/3" srcset="https://images.fastspot.com/new-college-of-florida/100x100/3 100w, https://images.fastspot.com/new-college-of-florida/300x300/3 300w" sizes="100vw" alt="image of Katherine Brion">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Katherine Brion</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Humanities Representative</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/4" data-src="//images.fastspot.com/new-college-of-florida/300x300/4" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/4 300w, //images.fastspot.com/new-college-of-florida/100x100/4 100w" alt="image of Kristopher Fennie">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/4" srcset="https://images.fastspot.com/new-college-of-florida/100x100/4 100w, https://images.fastspot.com/new-college-of-florida/300x300/4 300w" sizes="100vw" alt="image of Kristopher Fennie">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Kristopher Fennie</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Natural Sciences Representative</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tabbed_people_panel tabbed_people_panel_2 js-tabbed-people-panel js-tabbed-people-panel-2">
                        <ul class="tabbed_people_panel_list">
                            <li class="tabbed_people_panel_person">
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Emma Knadle</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Program Director</span>
                                    <span class="tabbled_people_panel_person_second_title">Second Title</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/3" data-src="//images.fastspot.com/new-college-of-florida/300x300/3" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/3 300w, //images.fastspot.com/new-college-of-florida/100x100/3 100w" alt="image of Andrews Anthony">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/3" srcset="https://images.fastspot.com/new-college-of-florida/100x100/3 100w, https://images.fastspot.com/new-college-of-florida/300x300/3 300w" sizes="100vw" alt="image of Andrews Anthony">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Andrews Anthony</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Program Advisor and Social Sciences Representative</span>
                                    <span class="tabbled_people_panel_person_second_title">Second Title</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/2" data-src="//images.fastspot.com/new-college-of-florida/300x300/2" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/2 300w, //images.fastspot.com/new-college-of-florida/100x100/2 100w" alt="image of Amy Reid">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/2" srcset="https://images.fastspot.com/new-college-of-florida/100x100/2 100w, https://images.fastspot.com/new-college-of-florida/300x300/2 300w" sizes="100vw" alt="image of Amy Reid">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Amy Reid</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Humanities Representative</span>
                                </div>
                            </li>
                            <li class="tabbed_people_panel_person has_image">
                                <figure class="tabbed_people_panel_person_figure">
                                    <span class="lazy_image_wrapper tabbed_people_panel_person_image_wrapper">
                                        <img class="js-lazy js-lazyload tabbed_people_panel_person_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/100x100/1" data-src="//images.fastspot.com/new-college-of-florida/300x300/1" data-srcset="//images.fastspot.com/new-college-of-florida/300x300/1 300w, //images.fastspot.com/new-college-of-florida/100x100/1 100w" alt="image of Kristopher Fennie">
                                    </span>
                                    <noscript>
                                        <img class="tabbed_people_panel_person_image" src="https://images.fastspot.com/new-college-of-florida/100x100/1" srcset="https://images.fastspot.com/new-college-of-florida/100x100/1 100w, https://images.fastspot.com/new-college-of-florida/300x300/1 300w" sizes="100vw" alt="image of Kristopher Fennie">
                                    </noscript>
                                </figure>
                                <div class="tabbed_people_panel_person_wrapper">
                                    <a href="#" class="tabbed_people_panel_person_name_link">
                                        <span class="tabbed_people_panel_person_name_link_inner">
                                            <span class="tabbed_people_panel_person_name_link_label">Kristopher Fennie</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                    <span class="tabbled_people_panel_person_title">Natural Sciences Representative</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tabbed_people js-tabbed-people">
	<div class="tabbed_people_inner">
		<div class="tabbed_people_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-10 fs-lg-push-1 fs-xl-8 fs-xl-push-2">
					{% if group_title %}
						<h2 class="tabbed_people_header_title">{{ group_title }}</h2>
					{% endif %}
					<ul class="tabbed_people_controller">
						{% for section in sections %}
						<li class="tabbed_people_toggle_item">
							<button class="tabbed_people_toggle_button js-tabbed-people-toggle-button js-swap" role="button" data-swap-target=".js-tabbed-people-panel-{{ loop.index }}" data-swap-group="people_group" data-swap-options='{"collapse": false}'{% if loop.index == 1 %} data-swap-active="true"{% endif %}>{{ section.title }}</button>
						</li>
						{% endfor %}
					</ul>
					<label for="tab-select" class="tabbed_people_mobile_controller_label">Select an option</label>
					<select name="tab-select" id="tab-select" class="tabbed_people_mobile_controller js-tabbed-people-select">
						{% for section in sections %}
						<option value=".js-tabbed-people-panel-{{ loop.index }}" class="tabbed_people_mobile_controller_option">{{ section.title }}</option>
						{% endfor %}
					</select>
				</div>
			</div>
		</div>
		<div class="tabbed_people_panels">
			<div class="fs-row">
				<div class="fs-cell fs-xl-10 fs-xl-push-1">
					{% for section in sections %}
					<div class="tabbed_people_panel tabbed_people_panel_{{ loop.index }} js-tabbed-people-panel js-tabbed-people-panel-{{ loop.index }}">
						<ul class="tabbed_people_panel_list">
							{% for person in section.items %}
							<li class="tabbed_people_panel_person{% if person.image %} has_image{% endif %}">
								{% if person.image %}
								<figure class="tabbed_people_panel_person_figure">
									{% include "@partial-image" with {
										class: "tabbed_people_panel_person",
										alt: "image of " ~ person.name,
										image: person.image,
										sources: [
											img.square.xxsml,
											img.square.thumb
										]
									} %}
								</figure>
								{% endif %}
								<div class="tabbed_people_panel_person_wrapper">
									<a href="#" class="tabbed_people_panel_person_name_link">
										<span class="tabbed_people_panel_person_name_link_inner">
											<span class="tabbed_people_panel_person_name_link_label">{{ person.name }}</span><span class="tabbed_people_panel_person_name_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;{{ icon("arrow_right") }}</span>
										</span>
									</a>
									{% if person.title %}
									<span class="tabbled_people_panel_person_title">{{ person.title }}</span>
									{% endif %}
									{% if person.second_title %}
									<span class="tabbled_people_panel_person_second_title">{{ person.second_title }}</span>
									{% endif %}
								</div>
							</li>
							{% endfor %}
						</ul>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.