Links
Text and Body Links
Link Color Guide Per Background
Use #4C4C4C for this background
Use #4C4C4C for this background
Use #4C4C4C for this background
Use #4C4C4C for this background
Use #FCC52B for this background
Use #FCC52B for this background
Use #FCC52B for this background
Links in Lists
Horizontal, Light
Horizontal, Dark
Vertical, Light
Vertical, Dark
<h3>Text and Body Links</h3>
<div class="versico example">
<p>
<a class="text-link" href="#do-nothing">Text Link Light Background</a>
</p>
<p>
<a class="text-link hover" href="#do-nothing">Text Link Light Background Hover</a>
</p>
</div>
<div class="versico example">
<p>
<a class="text-link dark sample gray" href="#do-nothing">Text Link Dark Background</a>
</p>
<p>
<a class="text-link dark sample gray hover" href="#do-nothing">Text Link Dark Background Hover</a>
</p>
</div>
<h3>Link Color Guide Per Background</h3>
<div class="versico example">
<p>
<a class="text-link sample" href="#do-nothing">Use #4C4C4C for this background</a>
<br />
<a class="text-link sample light-gray" href="#do-nothing">Use #4C4C4C for this background</a>
<br />
<a class="text-link sample gold" href="#do-nothing">Use #4C4C4C for this background</a>
<br />
<a class="text-link sample dark-gold" href="#do-nothing">Use #4C4C4C for this background</a>
<br />
<a class="text-link dark sample gray" href="#do-nothing">Use #FCC52B for this background</a>
<br />
<a class="text-link dark sample medium-gray" href="#do-nothing">Use #FCC52B for this background</a>
<br />
<a class="text-link dark sample dark-gray" href="#do-nothing">Use #FCC52B for this background</a>
</p>
</div>
<h3>Links in Lists</h3>
<p><b>Horizontal, Light</b></p>
<div class="versico example">
<a class="text-link list-horizontal-sample" href="#do-nothing">Horizontal List</a>
<a class="text-link list-horizontal-sample hover" href="#do-nothing">Horizontal List Hover</a>
<a class="text-link list-horizontal-sample" href="#do-nothing">Horizontal List</a>
</div>
<p><b>Horizontal, Dark</b></p>
<div class="versico example">
<div class="list-horizontal-container gray">
<a class="text-link dark list-horizontal-sample" href="#do-nothing">Horizontal List</a>
<a class="text-link dark list-horizontal-sample hover" href="#do-nothing">Horizontal List Hover</a>
<a class="text-link dark list-horizontal-sample" href="#do-nothing">Horizontal List</a>
</div>
</div>
<p><b>Vertical, Light</b></p>
<div class="versico example">
<div class="list-vertical-container light-gray">
<a class="text-link list-vertical-sample" href="#do-nothing">Horizontal List</a>
<a class="text-link list-vertical-sample hover" href="#do-nothing">Horizontal List Hover</a>
<a class="text-link list-vertical-sample" href="#do-nothing">Horizontal List</a>
</div>
</div>
<p><b>Vertical, Dark</b></p>
<div class="versico example">
<div class="list-vertical-container medium-gray">
<a class="text-link dark list-vertical-sample" href="#do-nothing">Horizontal List</a>
<a class="text-link dark list-vertical-sample hover" href="#do-nothing">Horizontal List Hover</a>
<a class="text-link dark list-vertical-sample" href="#do-nothing">Horizontal List</a>
</div>
</div>
Text Links
For links within other content or paragraphs.
- No icon use.
- Users should be able to identify links without relying on color alone.
- Font size should be the same as the paragraph they are associated with.
Unordered List - Horizontal Implementation
- No icon use.
- Do not use verticle rules to separate links.
Unordered List - Vertical Implementation
- No icon use.
- Do not use horizontal rules to separate links.
- This IS NOT the same as the left-side filter tree styling rules.