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.
SchoolStatus Connect
HTML
<header id="hc-app-header" class='hc-app-header hc-connect'> <h1 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> </h1> <div 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" aria-label="Send a message"> <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" aria-label="Create a new item"> <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" aria-label="User settings"> <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> </div> <div class="hc-mobile-menu"> <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.
Attend
SchoolStatus Attend
toggle
HTML
<header id="hc-app-header" class='hc-app-header hc-attend'> <h1 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> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input 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"> <div id="attendMenuContact" role="button" tabindex="0" 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> </div> </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"> <div id='boostMenuAccount' role="button" tabindex="0" 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> </div> </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--20 hc-icon--danger"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='formsMenuMobile' role="button" tabindex="0" class="hc-relative hc-dropdown-toggle-button hc-mobile-menu--toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </div> </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-mobile-menu--section--padded hc-header-nav-divider"> <input type="search" class="hc-input 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-avatar hc-avatar--gray">ST</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="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header>
Boost
SchoolStatus Boost
HTML
<header id="hc-app-header" class='hc-app-header hc-boost'> <h1 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> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='boostMenuTime' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-with--leading-icon mr-2" role="button" tabindex="0"> <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"></sub> </div> </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-micro 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-micro 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"> <div id='boostMenuGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-dropdown-group hc-with--leading-icon" role="button" tabindex="0"> <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--clamp">Rydell High School</span> <span class="hc-button--dropdown--content hc-dropdown--clamp hc-text--secondary font-normal">Coaching Dashboard</span> <sub class="hc-button--dropdown--caret"></sub> </div> </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"> <div id='boostMenuHelp' class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button" role="button" tabindex="0"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret"></sub> </div> </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"> <div id='boostMenuAccount' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon" role="button" tabindex="0" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </div> </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> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='formsMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1" role="button" tabindex="0"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </div> </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>
Connect
SchoolStatus Connect
HTML
<header id="hc-app-header" class='hc-app-header hc-connect'> <h1 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> </h1> <div 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" aria-label="Send a message"> <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" aria-label="Create a new item"> <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" aria-label="User settings"> <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> </div> <div class="hc-mobile-menu"> <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>
SchoolStatus Classic
SchoolStatus Classic
HTML
<header id="hc-app-header" class='hc-app-header hc-classic'> <h1 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> </h1> <div 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> </div> <div class="hc-mobile-menu"> <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
toggle
toggle
HTML
<header id="hc-app-header" class='hc-app-header hc-forms'> <h1 class="hc-header-aside hc-header-logo--inline"> <a href="/" class="hc-header-logo hc-logo--auto hc-logo--operoo bg-white"></a> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='formsMenuGroup' class="hc-button hc-button--dropdown hc-dropdown-toggle-button" role="button" tabindex="0"> <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> </div> </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"> <div id="formsMenuContact" role="button" tabindex="0" 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> </div> </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"> <div id='formsMenuAccount' role="button" tabindex="0" 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> </div> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account" 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> </div> <div class="hc-mobile-menu hc-mobile-menu--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>
Sites & Apps
SchoolStatus Sites & Apps
toggle
HTML
<header id="hc-app-header" class='hc-app-header hc-sites'> <h1 class="hc-header-aside"> <a href="/" class="hc-header-logo"> <span class="hc-header-logo-brand">SchoolStatus</span> <span class="hc-header-logo-app">Sites & Apps</span> </a> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-button-segment"> <button type="button" class="hc-button hc-button--secondary"> School Feed </button> <button type="button" class="hc-button hc-button--secondary hc-button--selected"> Website </button> <button type="button" class="hc-button hc-button--secondary"> Messages </button> </div> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id="sitesMenuContact" role="button" tabindex="0" 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> </div> </div> <menu class="hc-dropdown-content hc-header-menu" aria-labelledby="sitesMenuContact"> <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"> <div id='boostMenuAccount' role="button" tabindex="0" 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> </div> </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"> <span class="hc-header-nav-heading"> Account & Setup </span> <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--table hc-icon--20"></i> Teacher Websites </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--school hc-icon--20"></i> Schools </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--brush hc-icon--20"></i> Branding </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--os-mac hc-icon--20"></i> Mobile App </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--accessibility hc-icon--20"></i> Accessibility </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <span class="hc-header-nav-heading"> Users & Groups </span> <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 hc-icon--20"></i> User 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--users hc-icon--20"></i> Groups </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--adjustment hc-icon--20"></i> Roles </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <span class="hc-header-nav-heading"> Messages </span> <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--send hc-icon--20"></i> Auto Notices </span> </a> </nav> <nav class="hc-header-nav hc-header-nav-divider"> <span class="hc-header-nav-heading"> Social Media </span> <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--share-alt hc-icon--20"></i> Connections </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--20 hc-icon--danger"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='formsMenuMobile' role="button" tabindex="0" class="hc-relative hc-dropdown-toggle-button hc-mobile-menu--toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </div> </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-mobile-menu--section--padded hc-header-nav-divider"> <input type="search" class="hc-input 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-avatar hc-avatar--gray">ST</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="hc-text--danger">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.
toggle
toggle
SchoolStatus Connect
SchoolStatus Attend
toggle
SchoolStatus Classic
SchoolStatus Boost
HTML
<header id="hc-app-header" class='hc-app-header hc-forms hc-mobile'> <h1 class="hc-header-aside hc-header-logo--inline"> <a href="/" class="hc-header-logo hc-logo--auto hc-logo--operoo bg-white"></a> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='operooMenu2Group' class="hc-button hc-button--dropdown hc-dropdown-toggle-button" role="button" tabindex="0"> <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> </div> </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"> <div id="formsMenuContact" role="button" tabindex="0" 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> </div> </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"> <div id='operooMenu2Account' role="button" tabindex="0" 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> </div> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account" 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> </div> <div class="hc-mobile-menu hc-mobile-menu--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-app-header hc-connect hc-mobile'> <h1 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> </h1> <div 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" aria-label="Send a message"> <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" aria-label="Create a new item"> <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" aria-label="User settings"> <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> </div> <div class="hc-mobile-menu"> <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-app-header hc-attend hc-mobile'> <h1 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> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <input type="search" class="hc-input 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"> <div id="attendMenuContact" role="button" tabindex="0" 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> </div> </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"> <div id='attendMenu2Account' role="button" tabindex="0" 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> </div> </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--20 hc-icon--danger"></i> <span class="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </section> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='attendMenu2Mobile' role="button" tabindex="0" class="hc-relative hc-dropdown-toggle-button hc-mobile-menu--toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </div> </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-mobile-menu--section--padded hc-header-nav-divider"> <input type="search" class="hc-input 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-avatar hc-avatar--gray">ST</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="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id="hc-app-header" class='hc-app-header hc-classic hc-mobile'> <h1 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> </h1> <div 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> </div> <div class="hc-mobile-menu"> <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-app-header hc-boost hc-mobile'> <h1 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> </h1> <div class="hc-header-main"> <section class="hc-header-main--page"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='boostMenu2Time' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-with--leading-icon mr-2" role="button" tabindex="0"> <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"></sub> </div> </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-micro 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-micro 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"> <div id='boostMenu2Group' class="hc-button hc-button--dropdown hc-dropdown-toggle-button hc-dropdown-group hc-with--leading-icon" role="button" tabindex="0"> <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--clamp">Rydell High School</span> <span class="hc-button--dropdown--content hc-dropdown--clamp hc-text--secondary font-normal">Coaching Dashboard</span> <sub class="hc-button--dropdown--caret"></sub> </div> </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"> <div id='boostMenu2Help' class="hc-button hc-button--dropdown hc-button--text hc-dropdown-toggle-button" role="button" tabindex="0"> <span class="hc-button--dropdown--content">Help</span> <sub class="hc-button--dropdown--caret"></sub> </div> </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"> <div id='boostMenu2Account' class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon" role="button" tabindex="0" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> </div> </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> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='boostMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1" role="button" tabindex="0"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--top-right"></span> </div> </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>