As of January 3rd, 2023 the Working NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Header
The Header Component displays the title and leading content of a page.
Demonstration
Markup
<header class="o-header"> <div> <nav aria-label="Breadcrumb" class="o-header__breadcrumbs"> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/index">Home</a> <svg aria-hidden="true" class="o-header__breadcrumbs-chevron icon-wnyc-ui rtl:flip"> <use href="#feather-chevron-right"></use> </svg> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/programs/index">Programs</a> <svg aria-hidden="true" class="o-header__breadcrumbs-chevron icon-wnyc-ui rtl:flip"> <use href="#feather-chevron-right"></use> </svg> <b aria-current="page">Title</b> </nav> <h1 class="o-header__title">Title</h1> <h2 class="o-header__subtitle">Subtitle</h2> <p> <mark class="badge mie-2">Recruitment info</mark> </p> <p class="small flex items-center"> <a class="link-anchor inline-flex mie-1" href="#services"> <svg class="icon-wnyc-ui icon-2" role="img"> <title>Services</title> <use href="#feather-award"></use> </svg> </a>Services, Certification </p> <p class="small flex items-center"> <a class="link-anchor inline-flex mie-1" href="#eligibility"> <svg class="icon-wnyc-ui icon-2" role="img"> <title>Eligibility</title> <use href="#feather-users"></use> </svg> </a>Eligibility </p> <p class="small flex items-center"> <a class="link-anchor inline-flex mie-1" href="#schedule"> <svg class="icon-wnyc-ui icon-2" role="img"> <title>Schedule</title> <use href="#feather-calendar"></use> </svg> </a>Duration, <span>schedule taxonomy</span> </p> <p class="small flex items-center"> <a class="link-anchor inline-flex mie-1" href="#disability-accommodation"> <svg class="icon icon-2" role="img"> <title>Disability Accommodations</title> <use href="#icon-wnyc-accessible"></use> </svg> </a> <span>Accommodates Disabilities</span> </p> <p class="small flex items-center"> <a class="link-anchor inline-flex mie-1" href="#language-access"> <svg class="icon-wnyc-ui icon-2" role="img"> <title>Language Accommodation</title> <use href="#icon-wnyc-translate"></use> </svg> </a> <span>Accommodates Multiple Languages</span> </p> <p class="small flex items-center"> <svg class="icon-wnyc-ui mie-1 icon-2" role="img"> <title>Sector Information</title> <use href="#feather-info"></use> </svg>Sector </p> <p class="small flex items-center"> <svg class="icon-wnyc-ui mie-1 icon-2" role="img"> <title>Timestamp</title> <use href="#feather-alert-triangle"></use> </svg>Last updated 2 days ago </p> </div> </header>