<div class="page_header theme_">
<div class="page_header_inner">
<div class="page_header_top">
<div class="page_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_breadcrumb_inner">
<div class="breadcrumb">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Student Clubs</span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_intro">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10">
<div class="page_intro_inner">
<h1 class="page_title" id="page_title" tabindex="-1">Student Clubs</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
<div class="intro_filter">
<div class="fs-row">
<div class="fs-cell">
<div class="intro_filter_inner">
<div class="intro_filter_content typography">
<p>nostrud commodo quis ut cillum tempor pariatur laborum non culpa esse eiusmod ad esse irure Lorem irure commodo commodo qui</p>
</div>
<div class="intro_filter_filters">
<h2 class="intro_filter_title">Search Student Clubs</h2>
<div class="intro_filter_filters_inner">
<!-- Filter -->
<div class="filter">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<div class="filter_bar">
<form class="filter_tools" action="" method="get">
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_1">Search Clubs</label>
<div class="filter_search_form">
<input class="filter_search_input" id="filter_tool_label_1" type="search" placeholder="Search clubs...">
<span class="filter_search_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_2">Interest Area</label>
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="Showing All" selected>Showing All</option>
<option value="Interest A">Interest A</option>
<option value="A Very Long Interest Name Here">A Very Long Interest Name Here</option>
</select>
</div>
<div class="filter_tool filter_tool_submit">
<button class="filter_tools_submit_button">
<span class="filter_tools_submit_button_inner">
<span class="filter_tools_submit_button_label">Submit</span>
<span class="filter_tools_submit_button_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Department List -->
<div class="js-accordion department_list">
<div class="fs-row">
<div class="fs-cell">
<div class="department_list_inner">
<ul class="department_list_items" id="item_list" aria-label="">
<li class="js-accordion-item js-department-item-1-1 department_item">
<div class="department_item_header">
<h2 class="department_item_heading">
<button class="js-accordion-swap js-swap department_item_button" data-swap-target=".js-department-item-1-1">
<span class="department_item_heading_inner">
<span class="department_item_heading_icon"></span>
<span class="department_item_heading_label">
<span class="department_item_heading_title">Club Name Goes Here</span>
</span>
</span>
</button>
</h2>
<div class="department_item_description">
<p>dolore commodo laboris ex enim do pariatur magna exercitation nulla</p>
<div class="department_item_type">
<span class="department_item_type_label">Club Type</span>
</div>
</div>
<div class="department_item_detail department_item_detail_owner">
<span class="department_item_detail_label">Contact<span class="department_item_detail_label_hint">:</span> </span>
<span class="department_item_detail_data">
First Lastname '24
</span>
</div>
</div>
<div class="js-accordion-content department_item_content" aria-label="Club Name Goes Here">
<div class="department_item_content_inner">
<div class="department_item_content_group">
<div class="department_item_content_text typography">
<p>Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.</p>
</div>
<ul class="department_item_links">
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_link">
<use href="/images/icons.svg#link" />
</svg>
</span>
<a href="#" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Suspendisse ullamcorper nisl sapien, sit.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<a href="https://facebook.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Donec vulputate sapien.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</span>
<a href="mailto:name@emaildomain.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">name<wbr />@emaildomain.com</span>
</span>
</a>
</li>
</ul>
</div>
<figure class="department_item_figure">
<img class="department_item_image" srcset="https://images.fastspot.com/le-moyne/300x225/1 300w, https://images.fastspot.com/le-moyne/500x375/1 500w, https://images.fastspot.com/le-moyne/740x555/1 740w" sizes="(min-width: 1220px) 412px, (min-width: 1394px) 359px, (min-width: 980px) 285px, (min-width: 740px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/740x555/1" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</li>
<li class="js-accordion-item js-department-item-1-2 department_item">
<div class="department_item_header">
<h2 class="department_item_heading">
<button class="js-accordion-swap js-swap department_item_button" data-swap-target=".js-department-item-1-2">
<span class="department_item_heading_inner">
<span class="department_item_heading_icon"></span>
<span class="department_item_heading_label">
<span class="department_item_heading_title">laboris commodo anim anim</span>
</span>
</span>
</button>
</h2>
<div class="department_item_description">
<p>cupidatat aliqua laboris occaecat magna commodo dolor aliquip excepteur labore veniam officia culpa occaecat ut</p>
<div class="department_item_type">
<span class="department_item_type_label">Club Type</span>
</div>
</div>
<div class="department_item_detail department_item_detail_owner">
<span class="department_item_detail_label">Contact<span class="department_item_detail_label_hint">:</span> </span>
<span class="department_item_detail_data">
First Lastname '24
</span>
</div>
</div>
<div class="js-accordion-content department_item_content" aria-label="laboris commodo anim anim">
<div class="department_item_content_inner">
<div class="department_item_content_group">
<div class="department_item_content_text typography">
<p>Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.</p>
</div>
<ul class="department_item_links">
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_link">
<use href="/images/icons.svg#link" />
</svg>
</span>
<a href="#" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Suspendisse ullamcorper nisl sapien, sit.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<a href="https://facebook.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Donec vulputate sapien.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</span>
<a href="mailto:name@emaildomain.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">name<wbr />@emaildomain.com</span>
</span>
</a>
</li>
</ul>
</div>
<figure class="department_item_figure">
<img class="department_item_image" srcset="https://images.fastspot.com/le-moyne/300x225/2 300w, https://images.fastspot.com/le-moyne/500x375/2 500w, https://images.fastspot.com/le-moyne/740x555/2 740w" sizes="(min-width: 1220px) 412px, (min-width: 1394px) 359px, (min-width: 980px) 285px, (min-width: 740px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/740x555/2" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</li>
<li class="js-accordion-item js-department-item-1-3 department_item">
<div class="department_item_header">
<h2 class="department_item_heading">
<button class="js-accordion-swap js-swap department_item_button" data-swap-target=".js-department-item-1-3">
<span class="department_item_heading_inner">
<span class="department_item_heading_icon"></span>
<span class="department_item_heading_label">
<span class="department_item_heading_title">occaecat do ipsum ipsum exercitation ut consectetur elit</span>
</span>
</span>
</button>
</h2>
<div class="department_item_description">
<p>aliqua veniam occaecat culpa mollit non minim mollit Lorem commodo</p>
<div class="department_item_type">
<span class="department_item_type_label">Club Type</span>
</div>
</div>
<div class="department_item_detail department_item_detail_owner">
<span class="department_item_detail_label">Contact<span class="department_item_detail_label_hint">:</span> </span>
<span class="department_item_detail_data">
First Lastname '24
</span>
</div>
</div>
<div class="js-accordion-content department_item_content" aria-label="occaecat do ipsum ipsum exercitation ut consectetur elit">
<div class="department_item_content_inner">
<div class="department_item_content_group">
<div class="department_item_content_text typography">
<p>Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.</p>
</div>
<ul class="department_item_links">
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_link">
<use href="/images/icons.svg#link" />
</svg>
</span>
<a href="#" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Suspendisse ullamcorper nisl sapien, sit.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<a href="https://facebook.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Donec vulputate sapien.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</span>
<a href="mailto:name@emaildomain.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">name<wbr />@emaildomain.com</span>
</span>
</a>
</li>
</ul>
</div>
<figure class="department_item_figure">
<img class="department_item_image" srcset="https://images.fastspot.com/le-moyne/300x225/3 300w, https://images.fastspot.com/le-moyne/500x375/3 500w, https://images.fastspot.com/le-moyne/740x555/3 740w" sizes="(min-width: 1220px) 412px, (min-width: 1394px) 359px, (min-width: 980px) 285px, (min-width: 740px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/740x555/3" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</li>
<li class="js-accordion-item js-department-item-1-4 department_item">
<div class="department_item_header">
<h2 class="department_item_heading">
<button class="js-accordion-swap js-swap department_item_button" data-swap-target=".js-department-item-1-4">
<span class="department_item_heading_inner">
<span class="department_item_heading_icon"></span>
<span class="department_item_heading_label">
<span class="department_item_heading_title">cillum mollit dolore elit veniam</span>
</span>
</span>
</button>
</h2>
<div class="department_item_description">
<p>dolor adipisicing et fugiat duis anim excepteur minim dolore aliqua</p>
<div class="department_item_type">
<span class="department_item_type_label">Club Type</span>
</div>
</div>
<div class="department_item_detail department_item_detail_owner">
<span class="department_item_detail_label">Contact<span class="department_item_detail_label_hint">:</span> </span>
<span class="department_item_detail_data">
First Lastname '24
</span>
</div>
</div>
<div class="js-accordion-content department_item_content" aria-label="cillum mollit dolore elit veniam">
<div class="department_item_content_inner">
<div class="department_item_content_group">
<div class="department_item_content_text typography">
<p>Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.</p>
</div>
<ul class="department_item_links">
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_link">
<use href="/images/icons.svg#link" />
</svg>
</span>
<a href="#" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Suspendisse ullamcorper nisl sapien, sit.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<a href="https://facebook.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">Donec vulputate sapien.</span>
</span>
</a>
</li>
<li class="department_item_links_item">
<span class="department_item_icon">
<svg class="icon icon_mail">
<use href="/images/icons.svg#mail" />
</svg>
</span>
<a href="mailto:name@emaildomain.com" class="department_item_small_link">
<span class="department_item_small_link_inner">
<span class="department_item_small_link_label">name<wbr />@emaildomain.com</span>
</span>
</a>
</li>
</ul>
</div>
<figure class="department_item_figure">
<img class="department_item_image" srcset="https://images.fastspot.com/le-moyne/300x225/4 300w, https://images.fastspot.com/le-moyne/500x375/4 500w, https://images.fastspot.com/le-moyne/740x555/4 740w" sizes="(min-width: 1220px) 412px, (min-width: 1394px) 359px, (min-width: 980px) 285px, (min-width: 740px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/740x555/4" alt="" loading="lazy" width="740" height="555">
</figure>
</div>
</div>
</li>
</ul>
<div class="department_list_pagination">
<!-- Pagination -->
<div class="pagination">
<nav class="pagination_nav" aria-label="Department Pagination">
<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_left">
<use href="/images/icons.svg#caret_left" />
</svg>
</span>
<span class="pagination_arrow_label">Previous Page</span>
</a>
<a class="pagination_arrow pagination_arrow_right" href="#">
<span class="pagination_arrow_label">Next Page</span>
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
</nav>
<form class="pagination_form" action="#" method="get">
<div class="pagination_form_inner">
<label class="pagination_form_label" for="pagination_form_select">Page</label>
<div class="pagination_form_select_wrapper">
<select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
</div>
<span class="pagination_form_suffix">of 50</span>
<button class="pagination_form_button" type="submit" aria-label="View Page">
<span class="pagination_form_button_inner">
<span class="pagination_form_button_label">Go</span>
<span class="pagination_form_button_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</button>
</div>
</form>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Department List -->
</div>
{% include '@partial-page-header' with {
page: page
} %}
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% include '@partial-intro-and-filter' with {
page: page,
} %}
{% render '@partial-department-list' with {
owner_label: 'Contact',
items: [
{
title: 'Club Name Goes Here',
description: 'dolore commodo laboris ex enim do pariatur magna exercitation nulla',
type: 'Club Type',
contact: {
email: 'name@university.edu',
owner: 'First Lastname \'24'
},
content: {
image: 1,
text: 'Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.',
links: [
{
url: '#',
title: 'Suspendisse ullamcorper nisl sapien, sit.',
},
{
url: 'https://facebook.com',
title: 'Donec vulputate sapien.',
},
{
url: 'mailto:name@emaildomain.com',
title: format_email('name@emaildomain.com'),
}
],
}
},
{
title: 'laboris commodo anim anim',
description: 'cupidatat aliqua laboris occaecat magna commodo dolor aliquip excepteur labore veniam officia culpa occaecat ut',
type: 'Club Type',
contact: {
email: 'name@university.edu',
owner: 'First Lastname \'24'
},
content: {
image: 2,
text: 'Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.',
links: [
{
url: '#',
title: 'Suspendisse ullamcorper nisl sapien, sit.',
},
{
url: 'https://facebook.com',
title: 'Donec vulputate sapien.',
},
{
url: 'mailto:name@emaildomain.com',
title: format_email('name@emaildomain.com'),
}
],
}
},
{
title: 'occaecat do ipsum ipsum exercitation ut consectetur elit',
description: 'aliqua veniam occaecat culpa mollit non minim mollit Lorem commodo',
type: 'Club Type',
contact: {
email: 'name@university.edu',
owner: 'First Lastname \'24'
},
content: {
image: 3,
text: 'Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.',
links: [
{
url: '#',
title: 'Suspendisse ullamcorper nisl sapien, sit.',
},
{
url: 'https://facebook.com',
title: 'Donec vulputate sapien.',
},
{
url: 'mailto:name@emaildomain.com',
title: format_email('name@emaildomain.com'),
}
],
}
},
{
title: 'cillum mollit dolore elit veniam',
description: 'dolor adipisicing et fugiat duis anim excepteur minim dolore aliqua',
type: 'Club Type',
contact: {
email: 'name@university.edu',
owner: 'First Lastname \'24'
},
content: {
image: 4,
text: 'Mauris bibendum et arcu at ornare. Donec non lectus posuere, mollis eros ut, pulvinar orci. Vivamus nec est vel massa pretium bibendum. Nam semper ultrices placerat. Ut vel lorem dolor. Morbi dictum nulla felis, et porttitor eros blandit sed. Phasellus sit amet libero leo. Nullam vitae sapien sed ipsum vehicula.',
links: [
{
url: '#',
title: 'Suspendisse ullamcorper nisl sapien, sit.',
},
{
url: 'https://facebook.com',
title: 'Donec vulputate sapien.',
},
{
url: 'mailto:name@emaildomain.com',
title: format_email('name@emaildomain.com'),
}
],
}
},
],
link_icons: true,
} %}
</div>
No notes defined.