MSMU Component Library

Department List 

<!-- Department List -->
<div class="department_list">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="department_list_inner">
                <div class="department_list_headings" aria-hidden="true">
                    <div class="department_list_headings_header">Name</div>
                    <div class="department_list_headings_body">
                        <div class="department_list_headings_details">
                            <div class="department_list_headings_details_contact">Contact</div>
                        </div>
                    </div>
                </div>
                <ul class="department_list_items" id="item_list" aria-label="">
                </ul>

                <!-- Pagination -->
                <div class="pagination">
                    <nav class="pagination_nav" aria-label="Directory Pagination">
                        <ul class="pagination_nav_list">
                            <li class="pagination_nav_list_item active">
                                <a href="#"><span>1</span></a>
                            </li>
                            <li class="pagination_nav_list_item">
                                <a href="#"><span>2</span></a>
                            </li>
                            <li class="pagination_nav_list_item">
                                <a href="#"><span>3</span></a>
                            </li>
                            <li class="pagination_nav_list_item">
                                <a href="#"><span>></span></a>
                            </li>
                            <li class="pagination_nav_list_item">
                                <a href="#"><span>>></span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <!-- END: Pagination -->
            </div>
        </div>
    </div>
</div>
<!-- END: Department List -->
 
{#
	{% include '@partial-department-list' with {
		title: 'Title',
		items: [
				{
				name: 'Name',
				title: 'Title',
				url: '#',
				image: '1',
				contact: {
					email: 'email@address.com',
					phone: '(410) 555-1234'
				},
				location: 'Location',
				department: {
					url: '#',
					label: 'Department'
				}
			}
		]
	} %}
#}
<!-- Department List -->
<div class="department_list">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="department_list_inner">
				<div class="department_list_headings" aria-hidden="true">
					<div class="department_list_headings_header">Name</div>
					<div class="department_list_headings_body">
						<div class="department_list_headings_details">
							<div class="department_list_headings_details_contact">Contact</div>
						</div>
					</div>
				</div>
				<ul class="department_list_items" id="item_list" aria-label="{{ title }}">
					{% for item in items %}
						<li class="department_list_item">
							{% render '@partial-department-item' with {
								item: item
							} %}
						</li>
					{% endfor %}
				</ul>
				{% render '@partial-pagination' with {
					title: 'Directory Pagination'
				} %}
			</div>
		</div>
	</div>
</div>
<!-- END: Department List -->

No notes defined.