Framework Component Library

Header 

<!-- Header -->
<header class="header" id="header" data-js-header>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src='https://www.googletagmanager.com/ns.html?id=GTM-KVMLJ2CW' height='0' width='0' style='display:none;visibility:hidden'></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <div class="header__ribbon">
        <div class="fw-container">
            <div class="header__ribbon-inner">
                <div class="header__secondary-nav">

                    <nav class="secondary-nav
 				" id="secondary-nav-1" aria-labelledby="secondary-nav-1__title">
                        <div class="secondary-nav__header">
                            <h2 class="secondary-nav__title" id="secondary-nav-1__title">Secondary Links</h2>
                        </div>
                        <ul class="secondary-nav__list" aria-labelledby="secondary-nav-1__title">
                            <li class="
						secondary-nav__item
														">
                                <a class="
							secondary-nav__item-link
											" id="secondary-nav-1__link-1item-link" href="#">
                                    <div class="secondary-nav__item-link-inner">
                                        <span class="secondary-nav__item-link-label">News</span>
                                    </div>
                                </a>
                            </li>

                            <li class="
						secondary-nav__item
														">
                                <a class="
							secondary-nav__item-link
											" id="secondary-nav-1__link-2item-link" href="#">
                                    <div class="secondary-nav__item-link-inner">
                                        <span class="secondary-nav__item-link-label">Events</span>
                                    </div>
                                </a>
                            </li>

                            <li class="
						secondary-nav__item
														">
                                <a class="
							secondary-nav__item-link
											" id="secondary-nav-1__link-3item-link" href="#">
                                    <div class="secondary-nav__item-link-inner">
                                        <span class="secondary-nav__item-link-label">Directory</span>
                                    </div>
                                </a>
                            </li>

                            <li class="
						secondary-nav__item
														">
                                <a class="
							secondary-nav__item-link
											" id="secondary-nav-1__link-4item-link" href="#">
                                    <div class="secondary-nav__item-link-inner">
                                        <span class="secondary-nav__item-link-label">Giving</span>
                                    </div>
                                </a>
                            </li>

                            <li class="
						secondary-nav__item
														">
                                <a class="
							secondary-nav__item-link
											" id="secondary-nav-1__link-5item-link" href="#">
                                    <div class="secondary-nav__item-link-inner">
                                        <span class="secondary-nav__item-link-label">Visit</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="header__audience-nav">

                    <!-- Toggle Navigation -->
                    <div class="
		audience-nav
 		 			audience-nav--header
 				" id="audience-nav-9">
                        <div class="audience-nav__button">

                            <button class="button-bordered
 				audience-nav__trigger" popovertarget="audience-nav-9__panel">
                                <span class="button-bordered__inner"> <span class="button-bordered__label">Audience</span>
                                    <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--plus">
                                            <use href="/images/icons.svg?1.0.0#plus" />
                                        </svg></span>
                                </span>
                            </button>
                        </div>
                        <div class="audience-nav__panel" id="audience-nav-9__panel" popover="auto" data-js-popover='{"hover":true,"closeOnBlur":true}'>

                            <nav class="audience-nav
 				" id="audience-nav-10" aria-labelledby="audience-nav-10__title">
                                <div class="audience-nav__header">
                                    <h2 class="audience-nav__title" id="audience-nav-10__title">Audience Links</h2>
                                </div>
                                <ul class="audience-nav__list" aria-labelledby="audience-nav-10__title">
                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-1item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Faculty</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-2item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Staff</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-3item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Current Students</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-4item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Prospective Student</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-5item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Alumni</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-6item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Parents & Families</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li class="
						audience-nav__item
														">
                                        <a class="
							audience-nav__item-link
											" id="audience-nav-10__link-7item-link" href="#">
                                            <div class="audience-nav__item-link-inner">
                                                <span class="audience-nav__item-link-label">Visitors</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <!-- END: Toggle Navigation -->
                </div>
            </div>
        </div>
    </div>
    <div class="header__primary">
        <div class="fw-container">
            <div class="header__primary-inner">
                <div class="header__logo">

                    <div class="logo logo--header">

                        <a class="logo__link
 				" href="#">
                            <span class="logo__link-inner"> <span class="logo__link-label">Framework</span>
                                <span class="logo__link-icon" aria-hidden="true">
                                    <svg class="icon icon--logo">
                                        <use href="/images/icons.svg?1.0.0#logo" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="header__controls">
                    <div class="header__control header__control--menu">

                        <button class="
		button-toggle
		button-bordered
 				" data-js-modal-trigger="menu">
                            <span class="
		button-toggle__inner
		button-toggle__inner--default
		button-bordered__inner
	"> <span class="button-toggle__label button-bordered__label">Menu</span>
                                <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
                                    <svg class="icon icon--menu">
                                        <use href="/images/icons.svg?1.0.0#menu" />
                                    </svg>
                                </span>
                            </span> <span class="
			button-toggle__inner
			button-toggle__inner--active
			button-bordered__inner
		">
                                <span class="button-toggle__label button-bordered__label">Menu</span>
                                <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
                                    <svg class="icon icon--menu">
                                        <use href="/images/icons.svg?1.0.0#menu" />
                                    </svg>
                                </span>
                            </span>
                        </button>
                    </div>
                    <div class="header__control header__control--search">

                        <a class="button-bordered
 				" href="#">
                            <span class="button-bordered__inner"> <span class="button-bordered__label">Search</span>
                                <span class="button-bordered__icon" aria-hidden="true">
                                    <svg class="icon icon--search">
                                        <use href="/images/icons.svg?1.0.0#search" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="header__search">

                    <div class="site-search site-search--header" id="site-search-1" itemscope itemtype="https://schema.org/WebSite">
                        <meta itemprop="url" content="http://static.example.dev.fastspot.com">
                        <form class="site-search__form" action="/components/preview/template-search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
                            <meta itemprop="target" content="http://static.example.dev.fastspot.com/components/preview/template-search?q={q}">
                            <label class="site-search__label" for="site-search-1__input">
                                Search
                            </label>
                            <div class="site-search__field">
                                <input class="site-search__input" id="site-search-1__input" itemprop="query-input" type="search" name="q" placeholder="Search the site" required>
                                <div class="site-search__submit">

                                    <button class="button-bordered
 				" id="site-search-1__button" type="submit">
                                        <span class="button-bordered__inner"> <span class="button-bordered__label">Submit Search</span>
                                            <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--search">
                                                    <use href="/images/icons.svg?1.0.0#search" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="header__main-nav">

                    <nav class="
		disclosure-nav
		main-disclosure-dropdown
 				disclosure-dropdown-nav" id="disclosure-nav-1" data-js-nav-disclosure aria-labelledby="disclosure-nav-1__title">
                        <div class="
			disclosure-nav__header
			main-disclosure-dropdown__header
		">
                            <h2 class="disclosure-nav__title main-disclosure-dropdown__title" id="disclosure-nav-1__title">Main Site Links</h2>
                        </div>
                        <ul class="
			disclosure-nav__list
			main-disclosure-dropdown__list
		" id="disclosure-nav-1_list" aria-labelledby="disclosure-nav-1__title">
                            <li class="
					disclosure-nav__item
					main-disclosure-dropdown__item
																main-disclosure-dropdown__item--has-children
															" id="disclosure-nav-1__item-1" data-js-nav-disclosure-item>
                                <div class="
						disclosure-nav__item-inner
						main-disclosure-dropdown__item-inner
					">
                                    <a class="
							disclosure-nav__item-link
							main-disclosure-dropdown__item-link
													" id="disclosure-nav-1__item-1-link" href="#">
                                        <div class="
								disclosure-nav__item-link-inner
								main-disclosure-dropdown__item-link-inner
							">
                                            <span class="
									disclosure-nav__item-link-label
									main-disclosure-dropdown__item-link-label
								">About</span>
                                        </div>
                                    </a>

                                    <button class="main-disclosure-dropdown__item-toggle
 				disclosure-nav__item-toggle " data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-1__item-1-link" aria-controls="disclosure-nav-1__children-1">
                                        <span class="main-disclosure-dropdown__item-toggle-inner"> <span class="main-disclosure-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                                    <use href="/images/icons.svg?1.0.0#caret-down" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                                <ul class="
							disclosure-nav__children
							main-disclosure-dropdown__children
						" id="disclosure-nav-1__children-1" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-1__item-1-link" hidden>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Lorem ipsum</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Consectetuer Adipiscing Elit</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aenean Commodo</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Penatibus et Magnis dis Parturient Montes Sapien ut Liber</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aenean Massa</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="
					disclosure-nav__item
					main-disclosure-dropdown__item
																main-disclosure-dropdown__item--has-children
															" id="disclosure-nav-1__item-2" data-js-nav-disclosure-item>
                                <div class="
						disclosure-nav__item-inner
						main-disclosure-dropdown__item-inner
					">
                                    <a class="
							disclosure-nav__item-link
							main-disclosure-dropdown__item-link
													" id="disclosure-nav-1__item-2-link" href="#">
                                        <div class="
								disclosure-nav__item-link-inner
								main-disclosure-dropdown__item-link-inner
							">
                                            <span class="
									disclosure-nav__item-link-label
									main-disclosure-dropdown__item-link-label
								">Academics</span>
                                        </div>
                                    </a>

                                    <button class="main-disclosure-dropdown__item-toggle
 				disclosure-nav__item-toggle " data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-1__item-2-link" aria-controls="disclosure-nav-1__children-2">
                                        <span class="main-disclosure-dropdown__item-toggle-inner"> <span class="main-disclosure-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                                    <use href="/images/icons.svg?1.0.0#caret-down" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                                <ul class="
							disclosure-nav__children
							main-disclosure-dropdown__children
						" id="disclosure-nav-1__children-2" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-1__item-2-link" hidden>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Nam Quam Nunc</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="
					disclosure-nav__item
					main-disclosure-dropdown__item
											main-disclosure-dropdown__item--is-open
																main-disclosure-dropdown__item--has-children
															" id="disclosure-nav-1__item-3" data-js-nav-disclosure-item>
                                <div class="
						disclosure-nav__item-inner
						main-disclosure-dropdown__item-inner
					">
                                    <a class="
							disclosure-nav__item-link
							main-disclosure-dropdown__item-link
															main-disclosure-dropdown__item-link--is-active
													" id="disclosure-nav-1__item-3-link" href="#" aria-current="page">
                                        <div class="
								disclosure-nav__item-link-inner
								main-disclosure-dropdown__item-link-inner
							">
                                            <span class="
									disclosure-nav__item-link-label
									main-disclosure-dropdown__item-link-label
								">Admissions</span>
                                        </div>
                                    </a>

                                    <button class="main-disclosure-dropdown__item-toggle
 				disclosure-nav__item-toggle " data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-1__item-3-link" aria-controls="disclosure-nav-1__children-3">
                                        <span class="main-disclosure-dropdown__item-toggle-inner"> <span class="main-disclosure-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                                    <use href="/images/icons.svg?1.0.0#caret-down" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                                <ul class="
							disclosure-nav__children
							main-disclosure-dropdown__children
						" id="disclosure-nav-1__children-3" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-1__item-3-link" hidden>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Nam quam nunc</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Blandit Vel</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Donec Vitae Sapien</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Ut Libero</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Venenatis Faucibus</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Nullam Quis Ante</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Sed Fringilla Mauris Sit</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Amet Nibh</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Donec Sodales Sagittis</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="
					disclosure-nav__item
					main-disclosure-dropdown__item
																main-disclosure-dropdown__item--has-children
															" id="disclosure-nav-1__item-4" data-js-nav-disclosure-item>
                                <div class="
						disclosure-nav__item-inner
						main-disclosure-dropdown__item-inner
					">
                                    <a class="
							disclosure-nav__item-link
							main-disclosure-dropdown__item-link
													" id="disclosure-nav-1__item-4-link" href="#">
                                        <div class="
								disclosure-nav__item-link-inner
								main-disclosure-dropdown__item-link-inner
							">
                                            <span class="
									disclosure-nav__item-link-label
									main-disclosure-dropdown__item-link-label
								">Financial Aid</span>
                                        </div>
                                    </a>

                                    <button class="main-disclosure-dropdown__item-toggle
 				disclosure-nav__item-toggle " data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-1__item-4-link" aria-controls="disclosure-nav-1__children-4">
                                        <span class="main-disclosure-dropdown__item-toggle-inner"> <span class="main-disclosure-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                                    <use href="/images/icons.svg?1.0.0#caret-down" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                                <ul class="
							disclosure-nav__children
							main-disclosure-dropdown__children
						" id="disclosure-nav-1__children-4" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-1__item-4-link" hidden>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aliquam Lorem Ante</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Quisque Rutrum</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aeneanimperdiet</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Tellus Eget Condimentum</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Duis Leo</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="
					disclosure-nav__item
					main-disclosure-dropdown__item
																main-disclosure-dropdown__item--has-children
															" id="disclosure-nav-1__item-5" data-js-nav-disclosure-item>
                                <div class="
						disclosure-nav__item-inner
						main-disclosure-dropdown__item-inner
					">
                                    <a class="
							disclosure-nav__item-link
							main-disclosure-dropdown__item-link
													" id="disclosure-nav-1__item-5-link" href="#">
                                        <div class="
								disclosure-nav__item-link-inner
								main-disclosure-dropdown__item-link-inner
							">
                                            <span class="
									disclosure-nav__item-link-label
									main-disclosure-dropdown__item-link-label
								">Student Life</span>
                                        </div>
                                    </a>

                                    <button class="main-disclosure-dropdown__item-toggle
 				disclosure-nav__item-toggle " data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-1__item-5-link" aria-controls="disclosure-nav-1__children-5">
                                        <span class="main-disclosure-dropdown__item-toggle-inner"> <span class="main-disclosure-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                                    <use href="/images/icons.svg?1.0.0#caret-down" />
                                                </svg></span>
                                        </span>
                                    </button>
                                </div>
                                <ul class="
							disclosure-nav__children
							main-disclosure-dropdown__children
						" id="disclosure-nav-1__children-5" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-1__item-5-link" hidden>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aenean Vulputate Eleifend Tellus</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Nascetur</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Ridiculus Mus</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Pellentesque Eu</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Vivamus Elementum Semper</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aenean Vulputate</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Aenean Leo Ligula</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="
									disclosure-nav__child-item
									main-disclosure-dropdown__child-item
																	" data-js-nav-disclosure-child-item>
                                        <a class="
										disclosure-nav__child-link
										main-disclosure-dropdown__child-link
																			" data-js-nav-disclosure-child-link href="#">
                                            <div class="
											disclosure-nav__item-link-inner
											main-disclosure-dropdown__item-link-inner
										">
                                                <span class="
												disclosure-nav__child-link-label
												main-disclosure-dropdown__child-link-label
											">Semper Libero</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- END: Header -->
 
<!-- Header -->
<header class="header" id="header" data-js-header>
	<!-- Google Tag Manager (noscript) -->
	<noscript>
		<iframe src='https://www.googletagmanager.com/ns.html?id={{ config.tag_manager }}' height='0' width='0' style='display:none;visibility:hidden'></iframe>
	</noscript>
	<!-- End Google Tag Manager (noscript) -->

	<div class="header__ribbon">
		<div class="fw-container">
			<div class="header__ribbon-inner">
				<div class="header__secondary-nav">
					{% include '@navigation-basic' with {
						classes: {
							base: 'secondary-nav',
							modifiers: [],
							utility: ''
						},
						title: 'Secondary Links',
						links: navigation.secondary
					} %}
				</div>

				<div class="header__audience-nav">
					{% include '@navigation-toggle' with {
						classes: {
							base: 'audience-nav',
							modifiers: ['header'],
							utility: ''
						},
						title: 'Audience Links',
						links: navigation.audience,
						popover: true,
						button: {
							classes: {
								base: 'button-bordered',
								utility: 'audience-nav__trigger'
							},
							title: 'Audience',
							icon: 'plus'
						},
						settings: {
							hover: true,
							closeOnBlur: true
						}
					} %}
				</div>
			</div>
		</div>
	</div>
	<div class="header__primary">
		<div class="fw-container">
			<div class="header__primary-inner">
				<div class="header__logo">
					{% include '@partial-logo' with {
						modifiers: [ 'header' ],
						print: ''
					} %}
				</div>
				<div class="header__controls">
					<div class="header__control header__control--menu">
						{% include '@partial-button-toggle' with {
							classes: {
								base: 'button-bordered'
							},
							attributes: {
								'data-js-modal-trigger': 'menu',
							},
							default: {
								title: 'Menu',
								icon: 'menu'
							},
							active: {
								title: 'Menu',
								icon: 'menu'
							}
						} only %}
					</div>
					<div class="header__control header__control--search">
						{% include '@partial-link' with {
							classes: {
								base: 'button-bordered'
							},
							title: 'Search',
							icon: 'search',
							url: '#'
						} only %}
					</div>
				</div>
				<div class="header__search">
					{% include '@partial-search' with {
						modifier: 'header',
						label: 'Search',
						placeholder: 'Search the site',
						button_text: 'Submit Search'
					} %}
				</div>
				<div class="header__main-nav">
					{% include '@navigation-disclosure-nav' with {
						classes: {
							base: 'main-disclosure-dropdown',
							modifiers: [],
							utility: 'disclosure-dropdown-nav'
						},
						title: 'Main Site Links',
						toggle: {
							classes: {
								utility: ''
							},
							icon: 'caret-down'
						},
						links: navigation.main,
						settings: {}
					} %}
				</div>
			</div>
		</div>
	</div>
</header>
<!-- END: Header -->

No notes defined.