<!-- Main navigation bar --> <nav class="qld__main-nav qld__main-nav--mega " id="#mainmenu" aria-label="main"> <div class="container-fluid"> <div class="qld__main-nav__content " id="main-nav"> <div class="qld__main-nav__menu qld__main-nav__menu--dark "> <div class="qld__main-nav__menu-inner"> <div class="qld__main-nav__focus-trap-top"></div> <div class="qld__main-nav__header"> <h2 class="qld__main-nav__menu-heading" tabindex="-1">Menu</h2> <button aria-controls="main-nav" class="qld__main-nav__toggle qld__main-nav__toggle--close"> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg> <span class="qld__main-nav__toggle-text">Close</span> </button> </div> <ul class="qld__link-list qld__link-list--flex"> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-home qld__main-nav__item-link" aria-label="Home" href="https://www.designsystem.qld.gov.au"> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#home"></use></svg> <span class="qld__main-nav__item-text" data-name="">Home</span> </a> </div> </li> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link qld__main-nav__item-link--desktop-hide" href="https://www.designsystem.qld.gov.au/getting-started">Getting started</a> <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-147402" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, Getting started"><span class="qld__main-nav__item-toggle-text" data-name="Getting started">Getting started</span> <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-up"></use></svg> </button> </div> <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-147402" style="display: none;"> <div class="qld__main-nav__menu-sub-inner"> <div class="qld__main-nav__sub-head"> <a class="qld__main-nav__sub-heading " href="https://www.designsystem.qld.gov.au/getting-started"> <span class="qld__main-nav__sub-item-text qld__display-lg">Getting started</span> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg> </a> </div> <hr class="qld__horizontal-rule qld__horizontal-rule--lg"> <ul class="qld__link-columns qld__link-columns--3-col qld__link-list"> <li class=""> <a href="https://www.designsystem.qld.gov.au/getting-started/getting-started"> <span class="qld__main-nav__sub-item-text">Designing</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/getting-started/developers"> <span class="qld__main-nav__sub-item-text">Developing</span> </a> </li> </ul> </div> </div> </li> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link qld__main-nav__item-link--desktop-hide" href="https://www.designsystem.qld.gov.au/brand-foundations">Brand requirements</a> <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-118489" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, Brand requirements"><span class="qld__main-nav__item-toggle-text" data-name="Brand requirements">Brand requirements</span> <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-up"></use></svg> </button> </div> <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-118489" style="display: none;"> <div class="qld__main-nav__menu-sub-inner"> <div class="qld__main-nav__sub-head"> <a class="qld__main-nav__sub-heading " href="https://www.designsystem.qld.gov.au/brand-foundations"> <span class="qld__main-nav__sub-item-text qld__display-lg">Brand requirements</span> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg> </a> </div> <hr class="qld__horizontal-rule qld__horizontal-rule--lg"> <ul class="qld__link-columns qld__link-columns--3-col qld__link-list"> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/brand-architecture"> <span class="qld__main-nav__sub-item-text">Brand architecture</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/where-does-my-site-fit"> <span class="qld__main-nav__sub-item-text">Where does my site fit in?</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/brand-guidelines"> <span class="qld__main-nav__sub-item-text">Brand guidelines</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/master-brand"> <span class="qld__main-nav__sub-item-text">Master brand</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/sub-brand"> <span class="qld__main-nav__sub-item-text">Sub-brand</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/co-brand"> <span class="qld__main-nav__sub-item-text">Co-brand</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/endorsed"> <span class="qld__main-nav__sub-item-text">Endorsed</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/stand-alone"> <span class="qld__main-nav__sub-item-text">Stand alone</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/brand-foundations/site-names-and-logos"> <span class="qld__main-nav__sub-item-text">Site names and logos</span> </a> </li> </ul> </div> </div> </li> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link qld__main-nav__item-link--desktop-hide" href="https://www.designsystem.qld.gov.au/styles">Core styles</a> <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-119486" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, Core styles"><span class="qld__main-nav__item-toggle-text" data-name="Core styles">Core styles</span> <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-up"></use></svg> </button> </div> <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-119486" style="display: none;"> <div class="qld__main-nav__menu-sub-inner"> <div class="qld__main-nav__sub-head"> <a class="qld__main-nav__sub-heading " href="https://www.designsystem.qld.gov.au/styles"> <span class="qld__main-nav__sub-item-text qld__display-lg">Core styles</span> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg> </a> </div> <hr class="qld__horizontal-rule qld__horizontal-rule--lg"> <ul class="qld__link-columns qld__link-columns--3-col qld__link-list"> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/colour"> <span class="qld__main-nav__sub-item-text">Colour</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/typography"> <span class="qld__main-nav__sub-item-text">Typography</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/iconography"> <span class="qld__main-nav__sub-item-text">Iconography</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/images"> <span class="qld__main-nav__sub-item-text">Images</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/layout-foundations"> <span class="qld__main-nav__sub-item-text">Grids</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/spacing"> <span class="qld__main-nav__sub-item-text">Spacing</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/underlines"> <span class="qld__main-nav__sub-item-text">Underlines</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/styles/flex-box-utilities"> <span class="qld__main-nav__sub-item-text">Flexbox utilities</span> </a> </li> </ul> </div> </div> </li> <li class="qld__main-nav__item active"> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link qld__main-nav__item-link--desktop-hide" href="https://www.designsystem.qld.gov.au/components">Components</a> <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-118501" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, Components"><span class="qld__main-nav__item-toggle-text" data-name="Components">Components</span> <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-up"></use></svg> </button> </div> <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-118501" style="display: none;"> <div class="qld__main-nav__menu-sub-inner"> <div class="qld__main-nav__sub-head"> <a class="qld__main-nav__sub-heading " href="https://www.designsystem.qld.gov.au/components"> <span class="qld__main-nav__sub-item-text qld__display-lg">Components</span> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg> </a> </div> <hr class="qld__horizontal-rule qld__horizontal-rule--lg"> <ul class="qld__link-columns qld__link-columns--3-col qld__link-list"> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/accordions"> <span class="qld__main-nav__sub-item-text">Accordions</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/back-to-top"> <span class="qld__main-nav__sub-item-text">Back to top</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/banners"> <span class="qld__main-nav__sub-item-text">Banners</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/breadcrumbs"> <span class="qld__main-nav__sub-item-text">Breadcrumbs</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/buttons"> <span class="qld__main-nav__sub-item-text">Buttons</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/callouts"> <span class="qld__main-nav__sub-item-text">Callouts and quotes</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/call-to-action-cta"> <span class="qld__main-nav__sub-item-text">Call to action (CTA)</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/cards"> <span class="qld__main-nav__sub-item-text">Cards</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/checkboxes"> <span class="qld__main-nav__sub-item-text">Checkboxes</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/direction-links"> <span class="qld__main-nav__sub-item-text">Direction links</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/file-upload"> <span class="qld__main-nav__sub-item-text">File upload</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/footer"> <span class="qld__main-nav__sub-item-text">Footer</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/forms"> <span class="qld__main-nav__sub-item-text">Forms</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/alerts-global"> <span class="qld__main-nav__sub-item-text">Global alerts</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/header"> <span class="qld__main-nav__sub-item-text">Header</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/navigation-horizontal-primary"> <span class="qld__main-nav__sub-item-text">Horizontal navigation</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/dividers-horizontal-rule"> <span class="qld__main-nav__sub-item-text">Horizontal rule</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/alerts-in-page"> <span class="qld__main-nav__sub-item-text">In-page alerts</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/in-page-navigation"> <span class="qld__main-nav__sub-item-text">In-page navigation</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/link-columns-link-list"> <span class="qld__main-nav__sub-item-text">Link columns (Link list)</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/loading-spinner"> <span class="qld__main-nav__sub-item-text">Loading spinner</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/pagination"> <span class="qld__main-nav__sub-item-text">Pagination</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/promotional-panel"> <span class="qld__main-nav__sub-item-text">Promotional panel</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/radio-buttons"> <span class="qld__main-nav__sub-item-text">Radio buttons</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/input-fields-select-box"> <span class="qld__main-nav__sub-item-text">Select box</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/side-navigation"> <span class="qld__main-nav__sub-item-text">Side navigation</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/tables"> <span class="qld__main-nav__sub-item-text">Tables</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/tabs"> <span class="qld__main-nav__sub-item-text">Tabs</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/tags"> <span class="qld__main-nav__sub-item-text">Tags</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/input-fields-text-box-and-area"> <span class="qld__main-nav__sub-item-text">Text box and text area</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/components/navigation-vertical-primary"> <span class="qld__main-nav__sub-item-text">Vertical navigation</span> </a> </li> </ul> </div> </div> </li> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link " href="https://www.designsystem.qld.gov.au/templates-and-patterns">Templates and patterns</a> </div> </li> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link qld__main-nav__item-link--desktop-hide" href="https://www.designsystem.qld.gov.au/about">About</a> <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-118539" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, About"><span class="qld__main-nav__item-toggle-text" data-name="About">About</span> <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-up"></use></svg> </button> </div> <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-118539" style="display: none;"> <div class="qld__main-nav__menu-sub-inner"> <div class="qld__main-nav__sub-head"> <a class="qld__main-nav__sub-heading " href="https://www.designsystem.qld.gov.au/about"> <span class="qld__main-nav__sub-item-text qld__display-lg">About</span> <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg> </a> </div> <hr class="qld__horizontal-rule qld__horizontal-rule--lg"> <ul class="qld__link-columns qld__link-columns--3-col qld__link-list"> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/principles-and-introduction"> <span class="qld__main-nav__sub-item-text">Introduction</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/digital-services-policy-and-standard"> <span class="qld__main-nav__sub-item-text">Digital services policy and standard</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/our-design-process"> <span class="qld__main-nav__sub-item-text">Our design process</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/exploring-our-decisions"> <span class="qld__main-nav__sub-item-text">Exploring our decisions</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/versions"> <span class="qld__main-nav__sub-item-text">Versions</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/contact-us"> <span class="qld__main-nav__sub-item-text">Contact us</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/glossary"> <span class="qld__main-nav__sub-item-text">Glossary</span> </a> </li> <li class=""> <a href="https://www.designsystem.qld.gov.au/about/future-releases"> <span class="qld__main-nav__sub-item-text">Future releases</span> </a> </li> </ul> </div> </div> </li> </ul> <div class="qld__mega-nav_mobile-filler-60"></div> <div class="qld__main-nav__cta-wrapper"> <ul class="qld__link-list qld__link-list--flex"> <li class="qld__main-nav__item qld__main-nav__item--cta "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link" href="https://www.designsystem.qld.gov.au/about/contact-us"> <i class="qld__icon qld__icon--sm fa-light fa-phone" aria-hidden="true"></i> <span class="qld__main-nav__item-text" data-name="Contact us">Contact us</span> </a> </div> </li> </ul> </div> <div class="qld__main-nav__focus-trap-bottom"></div> </div> </div> <div class="qld__main-nav__overlay" aria-controls="main-nav"></div> </div> </div> </nav>