Pre-footer

Used on the post and events listing pages.

¶Post listing (generic) pre-footer

Used on:

• Press release listings: 'generic' pre-footer
• Blog listings: RSS feed
• News listings: RSS feed

Open this Generic pre-footer in a new tab

HTML:

<div class="l-box l-box--no-border l-box--no-padding">
	<div class="pre-footer">
		<div class="l-switcher">
			<div>
				<div>
					<h2 class="h4">Keep updated</h2>
					<a href="mailto:w3c-news-request@w3.org?subject=subscribe">Get press releases by email</a>
				</div>
				<div>
					<h2 class="h4">Contact us</h2>
					<a href="mailto:w3t-pr@w3.org">Write to the W3C comms team</a>
				</div>
			</div>
		</div>
	</div>
</div>

¶Event listing pre-footer

This particular pre-footer uses <section> rather than simple <div> elements, mainly to clarify page structure for developers.

Open this Generic pre-footer in a new tab

HTML:

<div class="l-box l-box--no-border l-box--no-padding">
	<div class="pre-footer">
		<div class="l-switcher">
			<div>
				<section class="rss">
					<h2 class="h4">Related RSS feed</h2>
					<p class="with-icon--before with-icon--larger">
						<img class="icon icon--larger" src="/dist/assets/svg/rss.svg" width="30" height="30" alt="" aria-hidden="true">
						<a href="https://www.w3.org/events/feed">Subscribe to our Events feed</a>
					</p>
				</section>
				<section class="archive-links">
					<h2 class="h4">W3C archived events</h2>
					<button type="button" class="button button--ghost with-icon with-icon--after" style="" data-toggle="true" aria-expanded="false">Browse archives</button>
					<nav id="archive-nav" aria-label="Event archive">
						<ul class="clean-list">
							<li><a href="path/to/page">All</a></li>
							<li><a href="path/to/page">2020</a></li>
							<li><a href="path/to/page">2019</a></li>
							<li><a href="path/to/page">2018</a></li>
							<li><a href="path/to/page">2017</a></li>
							<li><a href="path/to/page">2016</a></li>
							<li><a href="path/to/page">2015</a></li>
							<li><a href="path/to/page">2014</a></li>
							<li><a href="path/to/page">2013</a></li>
							<li><a href="path/to/page">2012</a></li>
							<li><a href="path/to/page">2011</a></li>
							<li><a href="path/to/page">2010</a></li>
							<li><a href="path/to/page">2009</a></li>
							<li><a href="path/to/page">2008</a></li>
							<li><a href="path/to/page">2007</a></li>
							<li><a href="path/to/page">2006</a></li>
							<li><a href="path/to/page">2005</a></li>
							<li><a href="path/to/page">2004</a></li>
							<li><a href="path/to/page">2003</a></li>
							<li><a href="path/to/page">2002</a></li>
							<li><a href="path/to/page">2001</a></li>
							<li><a href="path/to/page">2000</a></li>
							<li><a href="path/to/page">1999</a></li>
							<li><a href="path/to/page">1998</a></li>
							<li><a href="path/to/page">1997</a></li>
							<li><a href="path/to/page">1996</a></li>
							<li><a href="path/to/page">1995</a></li>
							<li><a href="path/to/page">1994</a></li>
						</ul>
					</nav>
				</section>
			</div>
		</div>
	</div>
</div>

¶Considerations

Note the use of the box layout and the switcher layout.