feat(stats): add real footnotes

cal-itp · Jul 30, 2024 · 60e264d · 60e264d
1 parent d9d8bac
commit 60e264d
Showing 1 changed file with 34 additions and 9 deletions.
diff --git a/src/_includes/stats.html b/src/_includes/stats.html
@@ -27,14 +27,22 @@ <h2 class="h1 text-center">Impact across California</h2>
     <div class="row justify-content-center pt-3 pt-3 pt-lg-5 mt-lg-1 pb-4 mb-lg-3">
       <div class="col-11 mb-4 mb-lg-0 col-lg-3 px-4 text-center background-yellow-4 clipped-home-stat-1">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">11%</p>
-        <p class="fs-4 fw-bold lh-sm px-3">Increase in tap-to-pay benefit transactions<sup>1</sup></p>
+        <p class="fs-4 fw-bold lh-sm px-3">
+          Increase in tap-to-pay benefit transactions<sup id="fnref:1" role="doc-noteref">
+            <a class="link-body-emphasis text-decoration-none" href="#fn:1" rel="footnote">1</a>
+          </sup>
+        </p>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block" href="/customer-stories#benefits-MST"
           >Learn how Monterey-Salinas Transit increased ridership.</a
         >
       </div>
       <div class="col-11 mb-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-2">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">367,893</p>
-        <p class="fs-4 fw-bold lh-sm px-3">Contactless payment taps in 2023<sup>2</sup></p>
+        <p class="fs-4 fw-bold lh-sm px-3">
+          Contactless payment taps in 2023<sup id="fnref:2" role="doc-noteref">
+            <a class="link-body-emphasis text-decoration-none" href="#fn:2" rel="footnote">2</a>
+          </sup>
+        </p>
         <a
           class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block"
           href="/customer-stories#contactless-payments-GCTD"
@@ -45,7 +53,11 @@ <h2 class="h1 text-center">Impact across California</h2>
         class="col-11 mb-lg-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-3"
       >
         <p class="fs-stats pt-3 mt-3 mt-lg-5">91%</p>
-        <p class="fs-4 fw-bold lh-sm px-3">Reduction of expired GTFS Schedule Feeds<sup>3</sup></p>
+        <p class="fs-4 fw-bold lh-sm px-3">
+          Reduction of expired GTFS Schedule Feeds<sup id="fnref:3" role="doc-noteref">
+            <a class="link-body-emphasis text-decoration-none" href="#fn:3" rel="footnote">3</a>
+          </sup>
+        </p>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block" href="/customer-stories#GTFS-VCTC"
           >Learn more about Ventura County’s success with GTFS.</a
         >
@@ -55,11 +67,24 @@ <h2 class="h1 text-center">Impact across California</h2>
 </div>
 
 <div class="row d-flex justify-content-center">
-  <div class="col-lg-6 mb-3 pb-3">
-    <small class="d-block text-body-tertiary"
-      >1. Based on average month over month in the last year for California transit agencies using Benefits. Source.</small
-    >
-    <small class="d-block text-body-tertiary">2. Source</small>
-    <small class="d-block text-body-tertiary">3. Source</small>
+  <div class="col-lg-6 mb-3 pb-3" role="doc-endnotes">
+    <ol>
+      <li class="small text-body-tertiary" id="fn:1" role="doc-endnote">
+        <small class="d-block text-body-tertiary"
+          >Based on average month over month in the last year for California transit agencies using Benefits. Source.
+          <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></small
+        >
+      </li>
+      <li class="small text-body-tertiary" id="fn:2" role="doc-endnote">
+        <small class="d-block text-body-tertiary"
+          >Source <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></small
+        >
+      </li>
+      <li class="small text-body-tertiary" id="fn:3" role="doc-endnote">
+        <small class="d-block text-body-tertiary"
+          >Source <a href="#fnref:3" class="reversefootnote" role="doc-backlink">↩</a></small
+        >
+      </li>
+    </ol>
   </div>
 </div>