Site footer

The universal arXiv public-page footer (.ds-site-footer). Validated by exact agreement across the spinout-header-footer Cloud Run deployment and both redesign mockups (see the component audit).

Contents

Rendered directly from design-system.css: the acknowledgement line and the link row on the left, the funders on the right.

Relevant code 
<footer class="ds-site-footer">
  <div class="ds-site-footer-grid">
    <div class="ds-site-footer-main">
      <div class="ds-site-footer-ack">
        We gratefully acknowledge support from our <strong>major funders</strong>,
        <a href="#"><strong>member institutions</strong></a><span class="ack-member-inline">,
        <strong>Rheinisch-Westfälische Technische Hochschule Aachen</strong></span>,
        and <a href="#">all contributors</a>.
      </div>
      <nav class="ds-site-footer-links" aria-label="Site navigation">
        <a href="https://info.arxiv.org/about">About</a> <span class="ds-site-footer-sep" aria-hidden="true">·</span>
        <a href="https://info.arxiv.org/help">Help</a> <span class="ds-site-footer-sep" aria-hidden="true">·</span>
        <!-- … Contact, Subscribe, Copyright, Privacy, Accessibility, each followed by a separator … -->
        <a href="https://status.arxiv.org/" target="_blank" rel="noopener noreferrer">Operational Status<span class="is-sr-only"> (opens in new tab)</span></a>
      </nav>
    </div>
    <div class="ds-site-footer-funders">
      <div class="ds-site-footer-funders-label">Major funding support from</div>
      <div class="ds-site-footer-funders-logos">
        <img class="ds-funder-logo" src="…/Simons-wordmark.png" alt="Simons Foundation">
        <img class="ds-funder-logo" src="…/Schmidt_Sciences_wordmark.png" alt="Schmidt Sciences">
      </div>
    </div>
  </div>
</footer>
.ds-site-footer
The whole unit, on a <footer> element. Canvas ground with a hairline rule above it; hidden in print.
.ds-site-footer-grid
The row that holds the two columns. It wraps when the two do not fit on one line, and the funders column drops below the main column; under 720px that column also takes the full width.
.ds-site-footer-main
The left column: the acknowledgement line, then the link row. Capped at 720px and shrinks to fit beside the funders.
.ds-site-footer-links
The link row, on a <nav aria-label="Site navigation">. Plain <a> elements that wrap as a line; underlined on hover only.
.ds-site-footer-sep
The dot between two links. A <span> holding a middle dot, with aria-hidden="true".
target="_blank"
Only on the Operational Status link, which leaves arxiv.org. It takes rel="noopener noreferrer" and a .is-sr-only “(opens in new tab)” inside the link text.

The acknowledgement line

The institutional mention after “member institutions” is the optional IP-matched insertion: omit the wrapper span when no match exists.

Note

The span is an unstyled grouping hook for the templater, not a design-system class; the bold comes from the strong element.

We gratefully acknowledge support from our major funders, member institutions, Rheinisch-Westfälische Technische Hochschule Aachen, and all contributors.
We gratefully acknowledge support from our major funders, member institutions, and all contributors.
Relevant code 
<!-- With an IP-matched institution -->
<div class="ds-site-footer-ack">
  We gratefully acknowledge support from our <strong>major funders</strong>,
  <a href="#"><strong>member institutions</strong></a><span class="ack-member-inline">,
  <strong>Rheinisch-Westfälische Technische Hochschule Aachen</strong></span>,
  and <a href="#">all contributors</a>.
</div>

<!-- No match: the span is omitted -->
<div class="ds-site-footer-ack">
  We gratefully acknowledge support from our <strong>major funders</strong>,
  <a href="#"><strong>member institutions</strong></a>,
  and <a href="#">all contributors</a>.
</div>
.ds-site-footer-ack
The sentence, in muted small type. A <strong> inside it takes the full text colour; a link inside it takes the link colour.
.ack-member-inline
The IP-matched institution, inserted after “member institutions” together with its leading comma. Present only when there is a match.

The funders row

The right-hand column: a label and the major funders’ wordmarks, each on a white chip.

Major funding support from
Relevant code 
<div class="ds-site-footer-funders">
  <div class="ds-site-footer-funders-label">Major funding support from</div>
  <div class="ds-site-footer-funders-logos">
    <img class="ds-funder-logo" src="…/Simons-wordmark.png" alt="Simons Foundation">
    <img class="ds-funder-logo" src="…/Schmidt_Sciences_wordmark.png" alt="Schmidt Sciences">
  </div>
</div>
.ds-site-footer-funders
The column. Centred, and it keeps its width beside the main column; below 720px it takes the full width on its own row.
.ds-site-footer-funders-label
The line above the logos.
.ds-site-footer-funders-logos
The row of wordmarks. Wraps when the chips do not fit.
.ds-funder-logo
One wordmark: an <img> 40px tall on a white chip with a hairline border. The chip stays white in dark mode. Requires alt set to the organization’s name.

Accessibility essentials

  • Use the landmarks. The unit is a real <footer>, and the link row is a <nav aria-label="Site navigation">, so a screen reader user can jump to either one from a list of landmarks.
  • Hide the separators from assistive technology. Every dot separator carries aria-hidden="true"; screen readers otherwise announce “middot” between every link.
  • Name each funder. Funder logos carry organization names as alt text.
  • Say when a link opens a new tab. An external link (Operational Status) uses target="_blank", rel="noopener noreferrer", and a screen-reader-only “(opens in new tab)” notice inside the link text, so the link’s name says what will happen.
  • Keep the institution inside the sentence. The IP-matched institution is inserted after “member institutions”, with its comma, so the acknowledgement reads as one sentence. Omit the span when there is no match.

Rules

Wording

Type and print