Opportunity Standard

<div class="c-utility">
  <a class="link-icon mie-auto" href="https://nycopportunity.github.io/standard/demos/programs/index">
    <svg aria-hidden="true" class="icon-ui rtl:flip">
      <use href="#lucide-chevron-left"></use>
    </svg>
    <span>Programs</span>
  </a>
  <a class="c-utility__item text-inherit" href="#next-steps">Next steps</a>
  <button aria-controls="aria-c-text-controller" aria-expanded="false" class="btn-small c-utility__item" data-dialog="open" data-dialog-lock="true" data-js="dialog">
    <svg class="icon-ui hidden small:flex">
      <use href="#nyco-languages"></use>
    </svg>
    <span>Languages</span>
  </button>
  <div class="c-web-share c-utility__item">
    <div class="c-web-share__wrap">
      <!--{ Desktop Viewport Copy-to-clipboard Button }-->
      <!--{ @data-js       Initializes the copy-to-clipboard utility }-->
      <!--{ @data-copy     Identifies the target of the content to copy }-->
      <!--{ @aria-pressed  Will signify a pressed state to screen readers }-->
      <button aria-pressed="false" class="btn btn-small btn-primary mie-1 hidden tablet:inline-flex" data-copy="web-share-url" data-js="copy">
        <svg class="icon icon-ui">
          <use data-js-copy="icon" href="#lucide-copy"></use>
        </svg>
        <span>
          <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
          <span class="sr-only">Press to&nbsp;</span>Copy link
          <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
          <span class="sr-only">&nbsp;and share</span>
        </span>
      </button>
      <!--{ @data-js         "web-share" initalizes the Web Share Component. Falls back to using the Toggle Utility to display the sharing menu }-->
      <!--{ @data-web-share  Data attribute for holding data sent to the navigator.share() method. Note, in the Markup quotes are escaped as "&quot;" however, they must be regular quotes; "". Inspect the source of the Demostration to see the real example }-->
      <!--{ @aria-controls   Targets the Web Share fallback }-->
      <!--{ @aria-expanded   Indicates if the Web Share fallback is open or not }-->
      <button aria-controls="aria-c-web-share-fallback-2375395809bf6" aria-expanded="false" class="btn btn-small btn-primary" data-js="web-share" data-web-share="{&quot;title&quot;:&quot;Web Share&quot;,&quot;text&quot;:&quot;What users should say about this.&quot;,&quot;url&quot;:&quot;https://nycopportunity.github.io/standard/web-share&quot;}">
        <svg class="c-web-share__icon icon-ui">
          <use href="#lucide-share-2"></use>
        </svg>
        <span>Share
          <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
          <span class="sr-only">&nbsp;this page</span>
        </span>
      </button>
    </div>
    <!--{ Web Share Fallback }-->
    <!--{ @id           Toggle target of the web share button. Must match the "aria-controls" attribute of the toggling button }-->
    <!--{ @role         Indicates an area of significance }-->
    <!--{ @class        Add "hidden" to hide the fallback. Add a z-index utility, such as "z-30" to position the fallback over other elements }-->
    <!--{ @aria-hidden  Hides content from assistive technology }-->
    <div aria-hidden="true" class="c-web-share__fallback hidden right-0 z-30" id="aria-c-web-share-fallback-2375395809bf6" role="region">
      <div class="c-web-share__fallback-body">
        <div class="flex mb-2 items-center flex-row-reverse">
          <!--{ @data-js        data-js="web-share" designates this element as a toggling element for the dropdown }-->
          <!--{ @aria-controls  Targets the element that will be shown and hidden by the toggle }-->
          <!--{ @aria-expanded  Indicates if the dropdown is open or not }-->
          <!--{ @data-dialog    data-dialog="close" designates this element as the primary close toggle for the dropdown. It will be focused on when the dropdown is opened. Only one close toggle associated with this aria-controls value can exist on the page }-->
          <!--{ @tabindex       Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <button aria-controls="aria-c-web-share-fallback-2375395809bf6" aria-expanded="false" class="link-icon m-0" data-js="web-share" tabindex="-1">
            <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
            <svg aria-hidden="true" class="icon-ui" tabindex="-1">
              <use href="#lucide-x"></use>
            </svg>
            <span>Close</span>
          </button>
          <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <label class="c-web-share__label flex-1" for="web-share-url" tabindex="-1">Link to share</label>
        </div>
        <div class="c-web-share__input input">
          <!--{ Copy-to-clipboard Content }-->
          <!--{ @data-copy-target  Identifies the input as the target of the copy button }-->
          <!--{ @tabindex          Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <input data-copy-target="web-share-url" id="web-share-url" name="web-share-url" tabindex="-1" type="text" value="https://nycopportunity.github.io/standard/web-share" />
        </div>
        <div class="c-web-share__items">
          <!--{ Copy-to-clipboard Button }-->
          <!--{ @data-js       Initializes the copy-to-clipboard utility }-->
          <!--{ @data-copy     Identifies the target of the content to copy }-->
          <!--{ @aria-pressed  Will signify a pressed state to screen readers }-->
          <!--{ @tabindex      Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <button aria-pressed="false" class="c-web-share__item c-web-share__copy btn btn-small btn-primary mx-0" data-copy="web-share-url" data-js="copy" tabindex="-1">
            <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
            <svg class="icon icon-ui" tabindex="-1">
              <use data-js-copy="icon" href="#lucide-copy"></use>
            </svg>
            <span>
              <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
              <span class="sr-only">Press to&nbsp;</span>Copy link
            </span>
          </button>
          <!--{ Facebook Sharer }-->
          <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <a class="c-web-share__item btn btn-small btn-primary mx-0" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnycopportunity.github.io%2Fstandard%2Fweb-share" tabindex="-1" target="_blank">
            <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
            <svg class="icon-ui" tabindex="-1">
              <use href="#lucide-facebook"></use>
            </svg>
            <span>
              <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
              <span class="sr-only">Share to&nbsp;</span>Facebook
            </span>
          </a>
          <!--{ Twitter Tweet }-->
          <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <a class="c-web-share__item btn btn-small btn-primary mx-0" href="https://twitter.com/intent/tweet?text=What%20users%20should%20say%20about%20this.%20https%3A%2F%2Fnycopportunity.github.io%2Fstandard%2Fweb-share" tabindex="-1" target="_blank">
            <svg class="icon-ui" tabindex="-1">
              <use href="#lucide-twitter"></use>
            </svg>
            <span>
              <!--{ @class  "sr-only" visually hides more descriptive text for screen readers }-->
              <span class="sr-only">Share to&nbsp;</span>Twitter
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>