Dream Academy 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>
        </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">Dream Academy</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__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 & Press</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">Calendar</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">Photo Gallery</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">Contact</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <div class="header__secondary-nav-ctas">

                        <a class="button-rounded
 				" href="#">
                            <span class="button-rounded__inner"> <span class="button-rounded__label">Visit</span>
                            </span>
                        </a>

                        <a class="button-rounded
 				" href="#">
                            <span class="button-rounded__inner"> <span class="button-rounded__label">Make a Gift</span>
                            </span>
                        </a>

                        <a class="button-rounded
 		 			button-rounded--alt
 				" href="#">
                            <span class="button-rounded__inner"> <span class="button-rounded__label">Enroll</span>
                            </span>
                        </a>
                    </div>

                </div>

                <div class="header__main-nav">
                    <div class="header__main-nav--inner">

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

                                        <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-4__item-1-item-link">
                                            <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-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="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-4__item-1-item-link">
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Lorem ipsum</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Consectetuer Adipiscing Elit</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Commodo</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Penatibus et Magnis dis Parturient Montes Sapien ut Liber</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Massa</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

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

                                        <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-4__item-2-item-link">
                                            <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-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="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-4__item-2-item-link">
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nam Quam Nunc</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

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

                                        <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-4__item-3-item-link">
                                            <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-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="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-4__item-3-item-link">
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nam quam nunc</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Blandit Vel</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Donec Vitae Sapien</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Ut Libero</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Venenatis Faucibus</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nullam Quis Ante</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Sed Fringilla Mauris Sit</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Amet Nibh</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Donec Sodales Sagittis</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-4__item-4">
                                    <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                                        <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
													" id="reveal-nav-4__item-4-item-link" href="#">
                                            <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                                                <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">Student Life</span>
                                            </div>
                                        </a>

                                        <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-4__item-4-item-link">
                                            <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-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="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-4__item-4-item-link">
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Vulputate Eleifend Tellus</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nascetur</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Ridiculus Mus</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Pellentesque Eu</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Vivamus Elementum Semper</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Vulputate</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Leo Ligula</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                                            <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                                                <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                                                    <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Semper Libero</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="header__controls">
                        <div class="header__control header__control--menu">
                            <button class="button-toggle button-custom state-swap-enabled" data-js-swap="" data-js-menu-open="" data-swap-target="#menu" data-swap-linked="menu">
                                <span class="button-toggle__inner button-toggle__inner--default button-custom__inner">
                                    <span class="button-toggle__label button-custom__label">Menu</span>
                                    <span class="button-toggle__icon button-custom__icon" aria-hidden="true"><svg class="icon icon--menu">
                                            <use href="/images/icons.svg?1.0.0#menu" />
                                        </svg><svg class="icon icon--search">
                                            <use href="/images/icons.svg?1.0.0#search" />
                                        </svg></span>
                                </span>

                                <span class="button-toggle__inner button-toggle__inner--active button-custom__inner">
                                    <span class="button-toggle__label button-custom__label">Menu</span>
                                    <span class="button-toggle__icon button-custom__icon" aria-hidden="true"><svg class="icon icon--menu">
                                            <use href="/images/icons.svg?1.0.0#menu" />
                                        </svg><svg class="icon icon--search">
                                            <use href="/images/icons.svg?1.0.0#search" />
                                        </svg></span>
                                </span>
                            </button>
                        </div>
                        <div class="header__control header__control--search">

                            <a class="button-custom
 				" href="#">
                                <span class="button-custom__inner"> <span class="button-custom__label">Search</span>
                                    <span class="button-custom__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>

            </div>
        </div>
    </div>
</header>
<!-- END: Header -->
 
{% set site_logo = "logo" %}
{% set header_variant = "" %}
{% if "layout_home" in page.classes %}
	{% set header_variant = " header-type--home" %}
{% endif %}

{% if "layout_default" in page.classes %}
	{% set header_variant = " header-type--default" %}
{% endif %}
{% set visit_cta = {'title': 'Visit', 'url': '#'} %}
{% set gift_cta = {'title': 'Make a Gift', 'url': '#'} %}
{% set enroll_cta = {'title': 'Enroll', 'url': '#'} %}

<!-- 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: 'toggle-nav-overlay'
						},
						title: 'Audience Links',
						links: navigation.audience,
						icon: '',
						child_icon: '',
						toggle: {
							classes: {
								base: 'button-bordered'
							},
							default: {
								title: 'Audience',
								icon: 'plus'
							},
							active: {
								title: 'Close',
								icon: 'minus'
							}
						}
					} %}
				</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' ],
						logo: site_logo,
						print: ''
					} %}
				</div>

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

					<div class="header__secondary-nav-ctas">
						{% if visit_cta %}
							{% include '@partial-link' with {
								classes: {
									base: 'button-rounded'
								},
								title: visit_cta.title,
								url: visit_cta.url,
								icon: ''
							} only %}
						{% endif %}
						{% if gift_cta %}
							{% include '@partial-link' with {
								classes: {
									base: 'button-rounded'
								},
								title: gift_cta.title,
								url: gift_cta.url,
								icon: ''
							} only %}
						{% endif %}
						{% if enroll_cta %}
							{% include '@partial-link' with {
								classes: {
									base: 'button-rounded',
									modifiers: ['alt'],
								},
								title: enroll_cta.title,
								url: enroll_cta.url,
								icon: ''
							} only %}
						{% endif %}
					</div>

				</div>

				<div class="header__main-nav">
					<div class="header__main-nav--inner">
						{% include '@navigation-reveal' with {
							classes: {
								base: 'main-nav-dropdown',
								modifiers: [],
								utility: 'dropdown-nav'
							},
							title: 'Main Site Links',
							toggle: {
								icon: 'caret-down'
							},
							links: navigation.main
						} %}
					</div>
					<div class="header__controls">
						<div class="header__control header__control--menu">
							<button class="button-toggle button-custom state-swap-enabled" data-js-swap="" data-js-menu-open="" data-swap-target="#menu" data-swap-linked="menu">
								<span class="button-toggle__inner button-toggle__inner--default button-custom__inner">
									<span class="button-toggle__label button-custom__label">Menu</span>
									<span class="button-toggle__icon button-custom__icon" aria-hidden="true">
										{{- icon('menu') -}}
										{{- icon('search') -}}
									</span>
								</span>
									
								<span class="button-toggle__inner button-toggle__inner--active button-custom__inner">
									<span class="button-toggle__label button-custom__label">Menu</span>
									<span class="button-toggle__icon button-custom__icon" aria-hidden="true">
										{{- icon('menu') -}}
										{{- icon('search') -}}
									</span>
								</span>
							</button>
						</div>
						<div class="header__control header__control--search">
							{% include '@partial-link' with {
								classes: {
									base: 'button-custom'
								},
								title: 'Search',
								icon: 'search',
								url: '#'
							} only %}
						</div>
					</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-reveal' with {
						classes: {
							base: 'main-nav-dropdown',
							modifiers: [],
							utility: 'dropdown-nav'
						},
						title: 'Main Site Links',
						toggle: {
							icon: 'caret-down'
						},
						links: navigation.main
					} %}
				</div> #}
			</div>
		</div>
	</div>
</header>
<!-- END: Header -->

No notes defined.