Footer

This example does not reflect the full list of links shown on the live site, as which links are included and how they are named can be changed. It only includes a home page link.

Open this Footer in a new tab

HTML:

<footer class="global-footer">
	<div class="l-center">
		<div class="global-footer__links">
			<div class="l-cluster">
				<ul class="clean-list" role="list">
					<li><a href="/">Home</a></li>
				</ul>
			</div>
			<ul class="clean-list" role="list">
				<li><a class="with-icon--larger" href="https://w3c.social/@w3c" hreflang="en">
					<img class="icon icon--larger" src="/dist/assets/svg/mastodon.svg" width="20"
						height="20" alt aria-hidden="true" loading="lazy"/>
					<span class="visuallyhidden">W3C on Mastodon</span></a>
				</li>
				<li><a class="with-icon--larger" href="https://github.com/w3c/" hreflang="en">
					<img class="icon icon--larger" src="/dist/assets/svg/github.svg" width="20"
						height="20" alt aria-hidden="true" loading="lazy"/>
					<span class="visuallyhidden">W3C on GitHub</span></a>
				</li>
			</ul>
		</div>
		<p class="copyright">Copyright &copy; 20XX <a href="https://www.w3.org/">World Wide Web	Consortium</a>.<br>
			<abbr title="World Wide Web Consortium">W3C</abbr><sup>&reg;</sup>
			<a href="https://www.w3.org/policies/#disclaimers">liability</a>,
			<a href="https://www.w3.org/policies/#trademarks">trademark</a> and
			<a rel="license" href="https://www.w3.org/copyright/software-license/" title="W3C Software License">permissive license</a>
			rules apply.</p>
	</div>
</footer>

Considerations

Note the use of the center layout and cluster layout.

Also note the incidence of a <span class="visuallyhidden"> to provide accessible text labels for icon links.