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--connect' 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-content--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-content--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" aria-label="Settings menu"> <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" aria-label="Mobile menu toggle"> <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" aria-label="Create a new item"> <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" aria-label="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> </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" aria-label="Settings menu"> <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--attend' 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" aria-label="Search input"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='attemdMenuContact' 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='attendMenuAccount' role="button" tabindex="0" class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--attend hc-indicator--top-right"> </div> </div> <div class="hc-dropdown-content hc-dropdown-content--right" aria-labelledby='attendMenuAccount'> <menu class="hc-dropdown-menu hc-dropdown-menu--account"> <span class="hc-avatar hc-avatar--blue hc-avatar--header">ST</span> <span class="hc-dropdown-menu--account-names hc-dropdown-menu--max-width"> <span class="hc-is--primary">Slippy Toad</span> <span class="hc-is--secondary">slippy.toad@schoolstatus.com</span> </span> <button class="hc-button hc-button--secondary hc-button--icon hc-button--lg" aria-label="User account settings"> <i class="hc-icon hc-icon--settings"></i> </button> </menu> <menu class="hc-dropdown-menu hc-dropdown-menu--context hc-dropdown-menu--with-indicators"> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--bell"></i> <span class="hc-dropdown-menu-item-label">Notifications</span> <span class="hc-indicator-count hc-indicator--danger">2</span> </a> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--adjustment"></i> <span class="hc-dropdown-menu-item-label">Preferences</span> </a> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--support"></i> <span class="hc-dropdown-menu-item-label">Open a support ticket</span> </a> </menu> <menu class="hc-dropdown-menu hc-dropdown-menu--context hc-dropdown-menu--logout"> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--log-out"></i> <span class="hc-dropdown-menu-item-label">Logout</span> </a> </menu> </div> </div> </section> </div> <div class="hc-mobile-menu"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='attendMenuMobile' role="button" tabindex="0" class="hc-relative hc-dropdown-toggle-button hc-mobile-menu--toggle" aria-label="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" aria-label="Search input"> </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--boost' 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> <span class="hc-indicator-status hc-indicator--on hc-indicator--boost hc-indicator--top-right"> </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='boostMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1" role="button" tabindex="0" aria-label="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-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students" aria-label="Search input"> </div> </div> </div> </div> </div> </header>
Connect
SchoolStatus Connect
HTML
<header id='hc-app-header--connect2' 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-content--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-content--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" aria-label="Settings menu"> <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" aria-label="Mobile menu toggle"> <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" aria-label="Create a new item"> <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" aria-label="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> </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" aria-label="Settings menu"> <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>
Forms & Flows
SchoolStatus Forms & Flows
toggle
toggle
HTML
<header id='hc-app-header--forms' class='hc-app-header hc-forms'> <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">Forms & Flows</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='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">Forms Hub</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">Forms Hub</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> </menu> </div> </section> <section class="hc-header-main--user"> <button class="hc-button hc-button--icon hc-button--text" aria-label="Change interface language"> <i class="hc-icon hc-icon--language"></i> </button> <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='formsMenuContact'> <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" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--forms hc-indicator--top-right"> </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"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenuMobile' class="hc-relative hc-dropdown-toggle-button mt-1" aria-label="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> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='connectMenuMobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-header-menu--forms"> <nav class="hc-header-nav hc-header-nav-divider hc-header-nav-divider--top"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight"> Groups for 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> </menu> </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--purple">ST</span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Fox McCloud</span> <span class="hc-header-menu--account--email">fox.mccloud@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--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="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--classic' 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 hc-input--search hc-input--contrast" placeholder="Search students" aria-label="Search input"> </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" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--classic hc-indicator--top-right"> </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" aria-label="Mobile menu toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--classic hc-indicator--top-right"> </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" aria-label="Search input"> </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>
Sites & Apps
SchoolStatus Sites & Apps
toggle
HTML
<header id='hc-app-header--sites' 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='sitesMenuAccount' role="button" tabindex="0" class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--sites hc-indicator--top-right"> </div> </div> <menu class="hc-dropdown-content hc-header-menu hc-header-menu--account hc-dropdown-content--right" aria-labelledby='sitesMenuAccount'> <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='sitesMenuMobile' role="button" tabindex="0" class="hc-relative hc-dropdown-toggle-button hc-mobile-menu--toggle" aria-label="Mobile menu toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--sites hc-indicator--top-right"> </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" aria-label="Search input"> </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.
SchoolStatus Attend
toggle
SchoolStatus Boost
SchoolStatus Connect
SchoolStatus Forms & Flows
toggle
toggle
SchoolStatus Classic
HTML
<header id='hc-app-header--attend2' 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" aria-label="Search input"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='attendMenu2Contact' 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='attendMenu2Contact'> <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" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--attend hc-indicator--top-right"> </div> </div> <div class="hc-dropdown-content hc-dropdown-content--right" aria-labelledby='attendMenu2Account'> <menu class="hc-dropdown-menu hc-dropdown-menu--account"> <span class="hc-avatar hc-avatar--blue hc-avatar--header">ST</span> <span class="hc-dropdown-menu--account-names hc-dropdown-menu--max-width"> <span class="hc-is--primary">Slippy Toad</span> <span class="hc-is--secondary">slippy.toad@schoolstatus.com</span> </span> <button class="hc-button hc-button--secondary hc-button--icon hc-button--lg" aria-label="User account settings"> <i class="hc-icon hc-icon--settings"></i> </button> </menu> <menu class="hc-dropdown-menu hc-dropdown-menu--context hc-dropdown-menu--with-indicators"> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--bell"></i> <span class="hc-dropdown-menu-item-label">Notifications</span> <span class="hc-indicator-count hc-indicator--danger">2</span> </a> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--adjustment"></i> <span class="hc-dropdown-menu-item-label">Preferences</span> </a> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--support"></i> <span class="hc-dropdown-menu-item-label">Open a support ticket</span> </a> </menu> <menu class="hc-dropdown-menu hc-dropdown-menu--context hc-dropdown-menu--logout"> <a href="/" class="hc-dropdown-menu-item"> <i class="hc-icon hc-icon--log-out"></i> <span class="hc-dropdown-menu-item-label">Logout</span> </a> </menu> </div> </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" aria-label="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" aria-label="Search input"> </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--boost2' 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> <span class="hc-indicator-status hc-indicator--on hc-indicator--boost hc-indicator--top-right"> </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" aria-label="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-header-nav-divider pb-4 px-5"> <input type="search" class="hc-input--search hc-input--contrast" placeholder="Search students" aria-label="Search input"> </div> </div> </div> </div> </div> </header> <header id='hc-app-header--connect3' 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-content--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-content--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" aria-label="Settings menu"> <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" aria-label="Mobile menu toggle"> <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" aria-label="Create a new item"> <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" aria-label="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> </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" aria-label="Settings menu"> <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--forms2' class='hc-app-header hc-forms 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">Forms & Flows</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='formsMenu2Group' 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">Forms Hub</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='formsMenu2Group'> <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">Forms Hub</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> </menu> </div> </section> <section class="hc-header-main--user"> <button class="hc-button hc-button--icon hc-button--text" aria-label="Change interface language"> <i class="hc-icon hc-icon--language"></i> </button> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <div id='formsMenu2Contact' 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='formsMenu2Contact'> <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='formsMenu2Account' role="button" tabindex="0" class="hc-dropdown-toggle-button hc-button hc-button--dropdown hc-button--dropdown--add-caret hc-button--icon" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--forms hc-indicator--top-right"> </div> </div> <menu class="hc-dropdown-content hc-dropdown-content--right hc-header-menu hc-header-menu--account" aria-labelledby='formsMenu2Account'> <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"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='formsMenu2Mobile' class="hc-relative hc-dropdown-toggle-button mt-1" aria-label="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> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper hc-header-menu hc-header-menu--account" aria-labelledby='formsMenu2Mobile'> <div class="hc-mobile-menu--content"> <div class="hc-mobile-menu--section"> <menu class="hc-header-menu hc-header-menu--forms"> <nav class="hc-header-nav hc-header-nav-divider hc-header-nav-divider--top"> <h5 class="hc-header-nav-heading"> <span class="hc-header-nav-heading--highlight"> Groups for 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> </menu> </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--purple">ST</span> <span class="hc-header-menu--account--name hc-header-menu--account--stack"> <span class="hc-header-menu--account--human">Fox McCloud</span> <span class="hc-header-menu--account--email">fox.mccloud@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--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="hc-text--danger">Log Out</span> </span> </a> </nav> </menu> </div> </div> </div> </div> </div> </header> <header id='hc-app-header--classic2' 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 hc-input--search hc-input--contrast" placeholder="Search students" aria-label="Search input"> </section> <section class="hc-header-main--user"> <div class="hc-dropdown"> <div class="hc-dropdown-toggle"> <button id='classicMenu2Contact' 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" aria-label="User account menu"> <i class="hc-icon hc-icon--user hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--classic hc-indicator--top-right"> </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" aria-label="Mobile menu toggle"> <i class="hc-icon hc-icon--menu hc-icon--contrast"></i> <span class="hc-indicator-status hc-indicator--on hc-indicator--classic hc-indicator--top-right"> </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" aria-label="Search input"> </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>
Custom themes
You can apply custom themes that come with Honeycomb by appending .hc-theme--{theme} to the element itself.
Alternatively, since all of the colors are defined with CSS variables, you can create your own by overriding these either via direct class name or by sending the variables on the <header> element with inline styles.
SchoolStatus Connect
HTML
<header id='hc-app-header--connect4' class='hc-app-header hc-connect hc-theme--halloween'> <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='connectMenu4Group' 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='connectMenu4Group'> <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='connectMenu4Create' 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-content--right" aria-labelledby='connectMenu4Create'> <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='connectMenu4Account' 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-content--right" aria-labelledby='connectMenu4Account'> <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" aria-label="Settings menu"> <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" aria-label="Mobile menu toggle"> <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" aria-label="Create a new item"> <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='connectMenu4Mobile' class="hc-relative hc-dropdown-toggle-button mt-1" aria-label="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> </button> </div> <div class="hc-dropdown-content hc-mobile-menu--wrapper" aria-labelledby='connectMenu4Mobile'> <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" aria-label="Settings menu"> <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> <div class="w-1/2 mx-auto flex flex-row items-center gap-2 pt-2"> <label class="whitespace-nowrap" for="change-theme">Theme:</label> <select class="hc-select" id="change-theme" name="change-theme" onchange="document.getElementById('hc-app-header--connect4').className = 'hc-app-header hc-connect ' + this.value;"> <option value="hc-theme--halloween">Halloween</option> <option value="hc-theme--christmas">Christmas</option> </select> </div>