Uses
Use the back link as a quick shortcut to take the user back to the previous page or a top level landing page.
Styles
The back link uses the Source Sans Pro font at 14 pixels with the #a51417 link color. A solid arrowhead precedes the link text.v
Examples
In the above example, the back link takes the user from a news article back to the news hub landing page. This link is located at the top of the article directly below the top-level navigation.
Code
HTML
<![CDATA[
<a href="/news" class="visit-news-hub"><div class="arrow-left"></div>Visit the News Hub</a>
]]>
CSS
<![CDATA[
.visit-news-hub {
margin: 0 0 25px;
display: inline-block;
position: relative;
padding-left: 16px;
font-size: 14px;
font-weight: 600;
}
.arrow-left {
content: '';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 6px solid #A51417;
position: absolute;
left: 0;
top: 5px;
}
.visit-news-hub:hover .arrow-left {
border-right: 6px solid #717171;
}
]]>
