<header class="o-header">
  <div>
    <nav aria-label="Breadcrumb" class="breadcrumbs">
      <a href="https://nycopportunity.github.io/standard/#">Home</a>
      <svg aria-hidden="true" class="breadcrumbs__chevron icon-ui rtl:flip">
        <use href="#lucide-chevron-right"></use>
      </svg>
      <a href="https://nycopportunity.github.io/standard/#">Programs</a>
      <svg aria-hidden="true" class="breadcrumbs__chevron icon-ui rtl:flip">
        <use href="#lucide-chevron-right"></use>
      </svg>
      <b aria-current="page">Program title</b>
    </nav>
    <div class="o-header__title">
      <svg class="o-header__icon text-blue-d-1 fill-blue-l-1" role="img">
        <title>{{ post.icon.name }}</title>
        <use href="#program-card-work"></use>
      </svg>
      <h1 class="o-header__heading">Plain language title</h1>
    </div>
    <h2 class="o-header__subtitle">
      <b>Program title</b> by agency and provider
    </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-ui icon-2" role="img">
          <title>Services Provided</title>
          <use href="#lucide-award"></use>
        </svg>
      </a>Services Provided
    </p>
    <p class="small flex items-center">
      <a class="link-anchor inline-flex mie-1" href="#eligibility">
        <svg class="icon-ui icon-2" role="img">
          <title>Eligibility</title>
          <use href="#lucide-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-ui icon-2" role="img">
          <title>Schedule and Length</title>
          <use href="#lucide-calendar"></use>
        </svg>
      </a>Duration and Length
    </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="#nyco-accessibility"></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-ui icon-2" role="img">
          <title>Language Access</title>
          <use href="#nyco-languages"></use>
        </svg>
      </a>
      <span>Language Access</span>
    </p>
    <p class="small flex items-center">
      <svg class="icon-ui mie-1 icon-2" role="img">
        <title>Sector Information</title>
        <use href="#lucide-info"></use>
      </svg>Sector
    </p>
    <p class="small flex items-center">
      <svg class="icon-ui mie-1 icon-2" role="img">
        <title>Last Updated</title>
        <use href="#lucide-alert-triangle"></use>
      </svg>Last updated 2 days ago
    </p>
  </div>
</header>