Working N Y C

<div class="c-utility">
  <a class="link-icon mie-auto" href="https://cityofnewyork.github.io/working-nyc-patterns/demos/programs/index">
    <svg aria-hidden="true" class="icon-wnyc-ui rtl:flip">
      <use href="#feather-chevron-left"></use>
    </svg>
    <span>Programs</span>
  </a>
  <a class="text-inherit mis-3" href="#next-steps">Next steps</a>
  <div class="c-web-share ">
    <!--{ @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-2752b3c3389bb" aria-expanded="false" class="btn btn-small btn-primary m-0" data-js="web-share" data-web-share="{&quot;title&quot;:&quot;The share title&quot;,&quot;text&quot;:&quot;What users should say about this.&quot;,&quot;url&quot;:&quot;https://cityofnewyork.github.io/nyco-wnyc-patterns&quot;}">
      <svg class="c-web-share__icon icon-wnyc-ui">
        <use href="#feather-share-2"></use>
      </svg>
      <span>Share</span>
    </button>
    <!--{ 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 }-->
    <div aria-hidden="true" class="c-web-share__fallback hidden right-0 z-30" id="aria-c-web-share-fallback-2752b3c3389bb" 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-2752b3c3389bb" aria-expanded="false" class="link-icon m-0" data-js="web-share" tabindex="-1">
            <svg aria-hidden="true" class="icon-wnyc-ui" tabindex="-1">
              <use href="#feather-x"></use>
            </svg>
            <span>Close</span>
          </button>
          <label class="c-web-share__label flex-1" for="web-share-url" tabindex="-1">Share this URL</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 }-->
          <input data-copy-target="web-share-url" id="web-share-url" name="web-share-url" tabindex="-1" type="text" value="https://cityofnewyork.github.io/nyco-wnyc-patterns" />
        </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 }-->
          <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">
            <svg class="icon icon-wnyc-ui">
              <use href="#feather-copy"></use>
            </svg>
            <svg class="icon-pressed icon-wnyc-ui">
              <use href="#feather-check"></use>
            </svg>
            <span>Copy URL</span>
          </button>
          <!--{ Facebook Sharer }-->
          <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%2Fcityofnewyork.github.io%2Fnyco-wnyc-patterns" tabindex="-1" target="_blank">
            <svg class="icon-wnyc-ui">
              <use href="#feather-facebook"></use>
            </svg>
            <span>Facebook</span>
          </a>
          <!--{ Twitter Tweet }-->
          <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%2Fcityofnewyork.github.io%2Fnyco-wnyc-patterns" tabindex="-1" target="_blank">
            <svg class="icon-wnyc-ui">
              <use href="#feather-twitter"></use>
            </svg>
            <span>Twitter</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>