Header
The application header is a fixed-position bar at the top of every screen for the most critical app information and controls. Along with the left side navigation, the header should provide a consistent look and feel cross-product.
Header basics
App headers must have an id #app-header and have two main flex-aligned groups: the logo and product name in an <aside> element and a variable-width section for controls in a <main> element.
Within the <main> element there are two additional sections that are also flex-aligned and justified with space-between: a .page section for app or site controls, and a .user section for user-level links, icons, and buttons.
HTML
<header id="hc-app-header" class='hc-connect'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Connect</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenuGroup' class="hc-dropdown-toggle-button hc-button hc-button--dropdown"> <span class="hc-button--dropdown--content whitespace-nowrap">North NJ District</span> <sub class="hc-button--dropdown--caret">Toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--connect hc-dropdown-menu" aria-labelledby='connectMenuGroup'> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> </section> <section class="hc-header-main--user"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle group"> <button id='connectMenuCreate' class="hc-dropdown-toggle-button hc-button hc-button--primary hc-button--connect hc-button--icon"> <i class="hc-icon hc-icon--plus hc-icon--32 hc-icon--solid hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--picker hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='conneectMenuCreate'> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--megaphone hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Announcement</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--mail-open hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Newsletter</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner hc-with--stack"> <i class="hc-icon hc-icon--calendar hc-icon--secondary"></i> <span class="flex flex-col"> <span class="hc-header-menu--picker--title">Event</span> <span class="hc-text--secondary">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--heart hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Volunteer Request</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--bookmark hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">To-Do Item</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Parent/Teacher Conference</span> </span> </a> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='connectMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--connect hc-indicator--top-right"> </button> </span> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='connectMenuAccount'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon hc-dropdown-toggle-button"> <i class="hc-icon hc-icon--plus hc-icon--contrast"></i> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu"> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-5 pb-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--megaphone hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Announcement</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--scroll hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Newsletter</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-start gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--calendar hc-icon--contrast"></i> <span class="flex flex-col"> <span class="font-semibold text-md text-white">Event</span> <span class="text-gray-600">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--heart hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Volunteer Request</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--bookmark hc-icon--contrast"></i> <span class="font-semibold text-md text-white">To-Do Item</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Parent/Teacher Conference</span> </span> </a> </menu> </div> </div> </div> </div> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper" aria-labelledby='connectMenuMobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <div class="hc-header-menu--header"> <span>North NJ District</span> </div> <menu class="hc-header-menu"> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-header-menu--account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
Product headers
Each product within the SchoolStatus suite has a customized header component with attendant functionality. Please reference each product header and the considerations for each below.
Connect
HTML
<header id="hc-app-header" class='hc-connect'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Connect</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenu2Group' class="hc-dropdown-toggle-button hc-button hc-button--dropdown"> <span class="hc-button--dropdown--content whitespace-nowrap">North NJ District</span> <sub class="hc-button--dropdown--caret">Toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--connect hc-dropdown-menu" aria-labelledby='connectMenu2Group'> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> </section> <section class="hc-header-main--user"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle group"> <button id='connectMenu2Create' class="hc-dropdown-toggle-button hc-button hc-button--primary hc-button--connect hc-button--icon"> <i class="hc-icon hc-icon--plus hc-icon--32 hc-icon--solid hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--picker hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='connectMenu2Create'> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--megaphone hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Announcement</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--mail-open hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Newsletter</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner hc-with--stack"> <i class="hc-icon hc-icon--calendar hc-icon--secondary"></i> <span class="flex flex-col"> <span class="hc-header-menu--picker--title">Event</span> <span class="hc-text--secondary">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--heart hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Volunteer Request</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--bookmark hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">To-Do Item</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Parent/Teacher Conference</span> </span> </a> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='connectMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--connect hc-indicator--top-right"> </button> </span> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='connectMenu2Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon hc-dropdown-toggle-button"> <i class="hc-icon hc-icon--plus hc-icon--contrast"></i> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu"> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-5 pb-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--megaphone hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Announcement</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--scroll hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Newsletter</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-start gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--calendar hc-icon--contrast"></i> <span class="flex flex-col"> <span class="font-semibold text-md text-white">Event</span> <span class="text-gray-600">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--heart hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Volunteer Request</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--bookmark hc-icon--contrast"></i> <span class="font-semibold text-md text-white">To-Do Item</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Parent/Teacher Conference</span> </span> </a> </menu> </div> </div> </div> </div> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper" aria-labelledby='connectMenu2Mobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <div class="hc-header-menu--header"> <span>North NJ District</span> </div> <menu class="hc-header-menu"> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-header-menu--account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
Boost
HTML
<header id="hc-app-header" class='hc-boost'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Boost</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenuTime' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-with--leading-icon mr-2"> <span class="hc-button--dropdown--content hc-button--dropdown--lead"> <i class="hc-icon hc-icon--calendar hc-icon--20 hc-icon--contrast"></i> </span> <span class="hc-button--dropdown--content">2023-24</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--boost hc-header-menu--boost--time" aria-labelledby='boostMenuTime'> <nav class="hc-header-nav hc-header-nav-divider"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> <span class="hc-active"> <i class="hc-icon hc-icon--check hc-icon--solid hc-icon--12"></i> </span> </span> <span class="hc-header-nav-item-time"> <strong class="hc-header-nav-item-primary">2023-24</strong> <small class="hc-microcopy hc-uppercase text-gray-800">Aug 2023 - Jul 2024</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> </span> <span class="hc-header-nav-item-time"> <strong class="hc-header-nav-item-primary">2022-23</strong> <small class="hc-microcopy hc-uppercase text-gray-800">Aug 2022 - Jul 2023</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Show past time periods </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar-add hc-icon--20"></i> Set custom date range </span> </a> </nav> </menu> </div> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenuGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-dropdown-group hc-with--leading-icon"> <span class="hc-button--dropdown--content hc-button--dropdown--lead"> <i class="hc-icon hc-icon--building hc-icon--20 hc-icon--contrast"></i> </span> <span class="hc-button--dropdown--content hc-dropdown-group">Group</span> <span class="hc-button--dropdown--content hc-text--secondary font-normal">Scope</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--boost hc-header-menu--boost--group" aria-labelledby='boostMenuGroup'> <nav class="hc-header-nav hc-header-nav-divider"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner hc-active"> <span class="hc-header-nav-item-circle"> <i class="hc-icon hc-icon--check hc-icon--solid hc-icon--12"></i> </span> <span class="hc-header-nav-item-group">Rydell High School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-parent hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Fox Chapel High School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Fairview Elementary School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">O'Hara Elementary School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Hartwood Elementary School</span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--archive hc-icon--20"></i> Show archived groups </span> </a> </nav> </menu> </div> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenuHelp' class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-boost-menu" aria-labelledby='boostMenuHelp'> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--ticket hc-icon--20"></i> Open a Support Ticket </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help Center </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='boostMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-content--right" aria-labelledby='boostMenuAccount'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Falco Lombardi</span> <span class="hc-header-menu--account--email">falco.lombardi@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--user-group hc-icon--20"></i> Group Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--mask hc-icon--20"></i> Masquerade </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> </div> </div> </div> </div> </header>
Attend
HTML
<header id="hc-app-header" class='hc-attend'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Attend</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="attendMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu" aria-labelledby="attendMenuContact"> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='boostMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-content--right" aria-labelledby='boostMenuAccount'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Slippy Toad</span> <span class="hc-header-menu--account--email">slippy.toad@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--refresh hc-icon--20"></i> Refresh Demo Account </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> Configure Notifications </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Slippy Toad</span> <span class="hc-header-menu--account--email">slippy.toad@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--refresh hc-icon--20"></i> Refresh Demo Account </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> Configure Notifications </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> <nav class="hc-header-nav"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</spa> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
SchoolStatus Classic
HTML
<header id="hc-app-header" class='hc-classic'> <aside class="hc-header-aside hc-header-aside--wide"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Classic</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="classicMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> <menu class="hc-dropdown-content hc-header-menu" aria-labelledby='classicMenuContact'> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> </menu> </div> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='classicMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account" aria-labelledby='classicMenuAccount'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Peppy Hare</span> <span class="hc-header-menu--account--email">peppy.hare@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--question-circle hc-icon--20"></i> About SchoolStatus </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--flask hc-icon--20"></i> Learning Lab </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--lightbulb hc-icon--20"></i> What's New? </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='classicMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='classicMenuMobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Peppy Hare</span> <span class="hc-header-menu--account--email">peppy.hare@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--question-circle hc-icon--20"></i> About SchoolStatus </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--flask hc-icon--20"></i> Learning Lab </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--lightbulb hc-icon--20"></i> What's New? </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> <nav class="hc-header-nav"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</spa> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
Operoo
HTML
<header id="hc-app-header" class='hc-forms'> <aside class="hc-header-aside hc-header-logo--inline"> <a href="/" class="hc-header-logo hc-logo--auto hc-logo--operoo bg-white"></a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button"> <span class="hc-header-item-group-logo"></span> <span class="hc-button--dropdown--content hc-whitespace-nowrap">Operoo Central</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-dropdown-menu hc-header-menu--forms" aria-labelledby='formsMenuGroup'> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading"> Groups for <span class="hc-header-nav-heading--highlight">username1</span> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-active hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> <span class="hc-with-check"> <i class="hc-icon hc-icon--check hc-icon--10"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Operoo Central</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Fairview Elementary School</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading flex justify-between"> <span class="hc-header-nav-heading--highlight">Linked accounts</span> <a href="#" class="text-base font-normal">Manage</a> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 1</strong> <small class="hc-header-item-group-info--user microcopy">gioia027</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 2</strong> <small class="hc-header-item-group-info--user microcopy">long.username007</small> </span> </span> </a> </nav> <nav class="hc-header-nav"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight">Operoo administration</span> </h5> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Administrator action one </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> Another administrator action </span> </a> </nav> </menu> </div> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="formsMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-dropdown-menu hc-forms-menu" aria-labelledby="formsdMenuContact"> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--legal hc-icon--20"></i> Terms & Conditions </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy Policy </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='formsMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account hc-dropdown-menu" aria-labelledby='formsMenuAccount'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--human">Fox McCloud</span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--link hc-icon--20"></i> Manage Linked Accounts </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--globe hc-icon--20"></i> Preferred Language </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center justify-between"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuMobileGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button"> <span class="hc-header-item-group-logo"></span> <span class="hc-button--dropdown--content hc-whitespace-nowrap">Operoo Central</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <div class="hc-dropdown-content hc-header-menu hc-header-menu--forms hc-mobile-menu--wrapper" aria-labelledby='formsMenuMobileGroup'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <h5 class="hc-header-nav-heading hc-text--secondary"> Groups for <span class="hc-header-nav-heading--highlight">username1</span> </h5> <nav class="hc-header-nav hc-header-nav-divider hc-header-nav-divider--top"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-active hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> <span class="hc-with-check"> <i class="hc-icon hc-icon--check hc-icon--10"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Operoo Central</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Fairview Elementary School</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading flex justify-between"> <span class="hc-header-nav-heading--highlight">Linked accounts</span> <a href="#" class="text-base font-normal">Manage</a> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 1</strong> <small class="hc-header-item-group-info--user microcopy">gioia027</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 2</strong> <small class="hc-header-item-group-info--user microcopy">long.username007</small> </span> </span> </a> </nav> <nav class="hc-header-nav"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight">Operoo administration</span> </h5> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Administrator action one </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> Another administrator action </span> </a> </nav> </menu> </div> </div> </div> </div> <div class="hc-right hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='formsMenuAccountMobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--human">Fox McCloud</span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--link hc-icon--20"></i> Manage Linked Accounts </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--globe hc-icon--20"></i> Preferred Language </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--legal hc-icon--20"></i> Terms & Conditions </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy Policy </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
Mobile handling
The header component CSS and markup here will automatically handle resizing and menu changes at various breakpoints. You can also add class .mobile to the <header> element to force the mobile view regardless of screen size.
HTML
<header id="hc-app-header" class='hc-forms hc-mobile'> <aside class="hc-header-aside hc-header-logo--inline"> <a href="/" class="hc-header-logo hc-logo--auto hc-logo--operoo bg-white"></a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='operooMenu2Group' class="hc-button hc-button--dropdown hc-dropdown-toggle-button"> <span class="hc-header-item-group-logo"></span> <span class="hc-button--dropdown--content hc-whitespace-nowrap">Operoo Central</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-dropdown-menu hc-header-menu--forms" aria-labelledby='operooMenu2Group'> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading"> Groups for <span class="hc-header-nav-heading--highlight">username1</span> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-active hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> <span class="hc-with-check"> <i class="hc-icon hc-icon--check hc-icon--10"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Operoo Central</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Fairview Elementary School</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading flex justify-between"> <span class="hc-header-nav-heading--highlight">Linked accounts</span> <a href="#" class="text-base font-normal">Manage</a> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 1</strong> <small class="hc-header-item-group-info--user microcopy">gioia027</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 2</strong> <small class="hc-header-item-group-info--user microcopy">long.username007</small> </span> </span> </a> </nav> <nav class="hc-header-nav"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight">Operoo administration</span> </h5> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Administrator action one </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> Another administrator action </span> </a> </nav> </menu> </div> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="formsMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-dropdown-menu hc-forms-menu" aria-labelledby="formsdMenuContact"> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--legal hc-icon--20"></i> Terms & Conditions </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy Policy </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='operooMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account hc-dropdown-menu" aria-labelledby='operooMenu2Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--human">Fox McCloud</span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--link hc-icon--20"></i> Manage Linked Accounts </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--globe hc-icon--20"></i> Preferred Language </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center justify-between"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='operooMenu2MobileGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button"> <span class="hc-header-item-group-logo"></span> <span class="hc-button--dropdown--content hc-whitespace-nowrap">Operoo Central</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <div class="hc-dropdown-content hc-header-menu hc-header-menu--forms hc-mobile-menu--wrapper" aria-labelledby='operooMenu2MobileGroup'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <h5 class="hc-header-nav-heading hc-text--secondary"> Groups for <span class="hc-header-nav-heading--highlight">username1</span> </h5> <nav class="hc-header-nav hc-header-nav-divider hc-header-nav-divider--top"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-active hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> <span class="hc-with-check"> <i class="hc-icon hc-icon--check hc-icon--10"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Operoo Central</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Fairview Elementary School</strong> <small class="hc-header-item-group-info--user microcopy">gioia026</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <h5 class="hc-header-nav-heading flex justify-between"> <span class="hc-header-nav-heading--highlight">Linked accounts</span> <a href="#" class="text-base font-normal">Manage</a> </h5> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 1</strong> <small class="hc-header-item-group-info--user microcopy">gioia027</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <span class="hc-header-item-group-logo"> <i class="hc-icon hc-icon--building hc-icon--16"></i> </span> </span> <span class="hc-header-item-group-info"> <strong class="hc-header-item-group-info--name">Linked Group 2</strong> <small class="hc-header-item-group-info--user microcopy">long.username007</small> </span> </span> </a> </nav> <nav class="hc-header-nav"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight">Operoo administration</span> </h5> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Administrator action one </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> Another administrator action </span> </a> </nav> </menu> </div> </div> </div> </div> <div class="hc-right hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='operooMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='operooMenu2AccountMobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--human">Fox McCloud</span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--link hc-icon--20"></i> Manage Linked Accounts </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--globe hc-icon--20"></i> Preferred Language </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--legal hc-icon--20"></i> Terms & Conditions </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy Policy </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id="hc-app-header" class='hc-connect hc-mobile'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Connect</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenu3Group' class="hc-dropdown-toggle-button hc-button hc-button--dropdown"> <span class="hc-button--dropdown--content whitespace-nowrap">North NJ District</span> <sub class="hc-button--dropdown--caret">Toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--connect hc-dropdown-menu" aria-labelledby='connectMenu3Group'> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> </section> <section class="hc-header-main--user"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle group"> <button id='connectMenu3Create' class="hc-dropdown-toggle-button hc-button hc-button--primary hc-button--connect hc-button--icon"> <i class="hc-icon hc-icon--plus hc-icon--32 hc-icon--solid hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--picker hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='connectMenu3Create'> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--megaphone hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Announcement</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--mail-open hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Newsletter</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner hc-with--stack"> <i class="hc-icon hc-icon--calendar hc-icon--secondary"></i> <span class="flex flex-col"> <span class="hc-header-menu--picker--title">Event</span> <span class="hc-text--secondary">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--heart hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Volunteer Request</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="hc-header-menu--picker--inner"> <i class="hc-icon hc-icon--bookmark hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">To-Do Item</span> </span> </a> <a href="/" class="hc-header-menu--picker--item"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--secondary"></i> <span class="hc-header-menu--picker--title">Parent/Teacher Conference</span> </span> </a> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='connectMenu3Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--connect hc-indicator--top-right"> </button> </span> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-menu hc-dropdown-menu--right" aria-labelledby='connectMenu3Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon mr-3"> <i class="hc-icon hc-icon--message hc-icon--solid hc-icon--contrast"></i> </button> <div class="hc-dropdown mr-4"> <div class="hc-dropdown-toggle"> <button class="hc-button hc-button--primary hc-button--connect hc-button--icon hc-dropdown-toggle-button"> <i class="hc-icon hc-icon--plus hc-icon--contrast"></i> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu"> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-5 pb-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--megaphone hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Announcement</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--scroll hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Newsletter</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-start gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--calendar hc-icon--contrast"></i> <span class="flex flex-col"> <span class="font-semibold text-md text-white">Event</span> <span class="text-gray-600">Organize parties, dates, and RSVPs.</span> </span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--heart hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Volunteer Request</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 py-4 border-b border-gray-850 whitespace-nowrap"> <i class="hc-icon hc-icon--bookmark hc-icon--contrast"></i> <span class="font-semibold text-md text-white">To-Do Item</span> </span> </a> <a href="/" class="flex px-5 hover:bg-gray-900"> <span class="flex flex-grow justify-start items-center gap-3 pt-4 pb-5 whitespace-nowrap"> <i class="hc-icon hc-icon--user-group hc-icon--contrast"></i> <span class="font-semibold text-md text-white">Parent/Teacher Conference</span> </span> </a> </menu> </div> </div> </div> </div> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='connectMenu3Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper" aria-labelledby='connectMenu3Mobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <div class="hc-header-menu--header"> <span>North NJ District</span> </div> <menu class="hc-header-menu"> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Children</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">2</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-peacock-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">James Rigatoni</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-lavender-400"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Daniel Biscotti</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Classes</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">4</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-success-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs. Remington's Sports Marketing</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-danger-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Vanden Boogart’s Second Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-warning-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Mrs Diedrich’s Fourth Grade</span> </a> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <i class="hc-icon hc-icon--plus-circle hc-icon--emerald"></i> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Add a new class</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Schools</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-forest-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Woodland Elementary</span> </a> </div> </details> <details class="hc-header-menu-collapse"> <summary class="hc-header-menu-collapse-title"> <span>Districts</span> <span class="hc-header-menu-collapse-title--right"> <span class="hc-indicator-count hc-indicator-count--off">1</span> <i class="hc-icon hc-icon--chevron-down hc-icon--contrast hc-icon--20"></i> </span> </summary> <div class="hc-header-menu-collapse-content"> <a href="/" class="flex gap-3 items-center justify-start mt-1 mb-2"> <span class="rounded-full h-6 w-6 mt-px flex-shrink-0 self-start bg-navy-200"></span> <span class="text-emerald-300 sm:text-emerald-500 leading-5">Kimberly Area School District</span> </a> </div> </details> </menu> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-header-menu--account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lime-500"></span> <span class="hc-header-menu--account--name">Fox McCloud</span> <button class="hc-button hc-button--icon"> <i class="hc-icon hc-icon--settings"></i> </button> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> <span class="hc-flex-grow">Notifications</span> <span class="hc-indicator-count hc-indicator-count--on">2</span> </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id="hc-app-header" class='hc-attend hc-mobile'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Attend</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="attendMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu" aria-labelledby="attendMenuContact"> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='attendMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-content--right" aria-labelledby='attendMenu2Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Slippy Toad</span> <span class="hc-header-menu--account--email">slippy.toad@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--refresh hc-icon--20"></i> Refresh Demo Account </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> Configure Notifications </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='attendMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Slippy Toad</span> <span class="hc-header-menu--account--email">slippy.toad@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--refresh hc-icon--20"></i> Refresh Demo Account </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--bell hc-icon--20"></i> Configure Notifications </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> <nav class="hc-header-nav"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</spa> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id="hc-app-header" class='hc-classic hc-mobile'> <aside class="hc-header-aside hc-header-aside--wide"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Classic</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id="classicMenuContact" class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> <menu class="hc-dropdown-content hc-header-menu" aria-labelledby='classicMenu2Contact'> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> </menu> </div> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='classicMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account" aria-labelledby='classicMenu2Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Peppy Hare</span> <span class="hc-header-menu--account--email">peppy.hare@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--question-circle hc-icon--20"></i> About SchoolStatus </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--flask hc-icon--20"></i> Learning Lab </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--lightbulb hc-icon--20"></i> What's New? </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='classicMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='classicMenu2Mobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-user-account"> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Peppy Hare</span> <span class="hc-header-menu--account--email">peppy.hare@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--question-circle hc-icon--20"></i> About SchoolStatus </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--flask hc-icon--20"></i> Learning Lab </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--lightbulb hc-icon--20"></i> What's New? </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help & Support </span> </a> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--eye hc-icon--20"></i> Privacy </span> </a> </nav> <nav class="hc-header-nav"> <a href="/" class="hc-header-nav-item-icon hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="text-danger-300">Log Out</spa> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id="hc-app-header" class='hc-boost hc-mobile'> <aside class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Boost</span> </a> </aside> <main class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenu2Time' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-with--leading-icon mr-2"> <span class="hc-button--dropdown--content hc-button--dropdown--lead"> <i class="hc-icon hc-icon--calendar hc-icon--20 hc-icon--contrast"></i> </span> <span class="hc-button--dropdown--content">2023-24</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--boost hc-header-menu--boost--time" aria-labelledby='boostMenu2Time'> <nav class="hc-header-nav hc-header-nav-divider"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> <span class="hc-active"> <i class="hc-icon hc-icon--check hc-icon--solid hc-icon--12"></i> </span> </span> <span class="hc-header-nav-item-time"> <strong class="hc-header-nav-item-primary">2023-24</strong> <small class="hc-microcopy hc-uppercase text-gray-800">Aug 2023 - Jul 2024</small> </span> </span> </a> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-status hc-relative"> <i class="hc-icon hc-icon--calendar hc-icon--20"></i> </span> <span class="hc-header-nav-item-time"> <strong class="hc-header-nav-item-primary">2022-23</strong> <small class="hc-microcopy hc-uppercase text-gray-800">Aug 2022 - Jul 2023</small> </span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--history hc-icon--20"></i> Show past time periods </span> </a> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--calendar-add hc-icon--20"></i> Set custom date range </span> </a> </nav> </menu> </div> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenu2Group' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-dropdown-group hc-with--leading-icon"> <span class="hc-button--dropdown--content hc-button--dropdown--lead"> <i class="hc-icon hc-icon--building hc-icon--20 hc-icon--contrast"></i> </span> <span class="hc-button--dropdown--content hc-dropdown-group">Group</span> <span class="hc-button--dropdown--content hc-text--secondary font-normal">Scope</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--boost hc-header-menu--boost--group" aria-labelledby='boostMenu2Group'> <nav class="hc-header-nav hc-header-nav-divider"> <a href="#" class="hc-header-nav-item hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner hc-active"> <span class="hc-header-nav-item-circle"> <i class="hc-icon hc-icon--check hc-icon--solid hc-icon--12"></i> </span> <span class="hc-header-nav-item-group">Rydell High School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-parent hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Fox Chapel High School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Fairview Elementary School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">O'Hara Elementary School</span> </span> </a> <a href="#" class="hc-header-nav-item hc-header-nav-item-child hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <span class="hc-header-nav-item-circle"></span> <span class="hc-header-nav-item-group">Hartwood Elementary School</span> </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="#" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--archive hc-icon--20"></i> Show archived groups </span> </a> </nav> </menu> </div> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenu2Help' class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret">toggle</sub> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-boost-menu" aria-labelledby='boostMenu2Help'> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--ticket hc-icon--20"></i> Open a Support Ticket </span> </a> <a href="/" class="hc-header-nav-item--link hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--support hc-icon--20"></i> Help Center </span> </a> </nav> </menu> </div> <div class="hc-dropdown hc-dropdown--with-separator hc-dropdown--with-separator--left"> <div class="hc-dropdown-toggle"> <button id='boostMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </button> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-content--right" aria-labelledby='boostMenu2Account'> <div class="hc-header-menu-session hc-header-menu-session--active"> <span class="hc-header-menu--account--avatar bg-lavender-500"></span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Falco Lombardi</span> <span class="hc-header-menu--account--email">falco.lombardi@schoolstatus.com</span> </span> </div> <nav class="hc-header-nav hc-header-nav-divider"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--settings hc-icon--20"></i> Account Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--user-group hc-icon--20"></i> Group Settings </span> </a> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon hc-whitespace-nowrap"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--mask hc-icon--20"></i> Masquerade </span> </a> </nav> <nav class="hc-header-nav hc-header-nav--list"> <a href="/" class="hc-header-nav-item--link hc-header-nav-item--with-icon"> <span class="hc-header-nav-item-inner"> <i class="hc-icon hc-icon--log-out hc-icon--danger hc-icon--20"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </main> <div class="hc-mobile-menu items-center"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='boostMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account"> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section hc-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students"> </div> </div> </div> </div> </div> </header>