Skip to main content

Links list

A responsive list of site links used in the site footer.

A linkslist-link takes up two lines of space. Titles longer than two lines do not currently have an ellipsis (TODO).

Example

<footer class="footer illStayHere co">

<div class="layoutContainer">
<div class="linksList">
<div class="linksList-items linksList-items--posts">
<h3 class="h3 m-b--none">Recent posts</h3>
<ol>
<li class="linksList-item">
<a href="#" class="linksList-link">How I removed all validation warnings from my RSS feed -
ASP.NET
Core</a>
</li>
<li class="linksList-item">
<a href="#" class="linksList-link">Setting a
page class in your Blazor app</a>
</li>
<li class="linksList-item">
<a href="#" class="linksList-link">Logging exceptions to Raygun from your Blazor Server
app</a>
</li>
</ol>
</div>
<div class="linksList-items linksList-items--posts">
<h3 class="h3 m-b--none">Popular posts</h3>
<ol>
<li class="linksList-item">
<a href="#" class="linksList-link">MVC5 prevents your website being loaded in an IFRAME</a>
</li>
<li class="linksList-item">
<a href="#" class="linksList-link">Life is now easier, Create media query mixins with
rulesets -
LESS CSS</a>
</li>
<li class="linksList-item">
<a href="#" class="linksList-link">Getting started with Grunt, SASS and Task Runner Explorer
-
Visual Studio</a>
</li>
</ol>
</div>
<div class="linksList-items linksList-items--social">
<h3 class="h3">Let's be social</h3>
<ul class="listInline m-b--full">
<li>
<a class="social linkedIn hideText m-r--full" rel="me"
title="Connect with Colin Bacon on LinkedIn" href="#">
LinkedIn</a>
</li>
<li>
<a class="social twitter hideText m-r--full" rel="me" title="Follow Colin Bacon on Twitter"
href="#">
Twitter</a>
</li>
</ul>
</div>
</div>
</div>
</footer>