Links

Text and Body Links

Text Link Light Background

Text Link Light Background Hover

Text Link Dark Background

Text Link Dark Background Hover

Links in Lists

Horizontal, Light

Horizontal List Horizontal List Hover Horizontal List

Horizontal, Dark

Horizontal List Horizontal List Hover Horizontal List

Vertical, Light

Horizontal List Horizontal List Hover Horizontal List

Vertical, Dark

Horizontal List Horizontal List Hover Horizontal List

<div class="carlislesyntec 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="carlislesyntec example">
    <p>
        <a class="text-link dark sample navy-blue" href="#do-nothing">Text Link Dark Background</a>
    </p>
    <p>
        <a class="text-link dark sample navy-blue hover" href="#do-nothing">Text Link Dark Background Hover</a>
    </p>
</div>

<div class="carlislesyntec 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>

<div class="carlislesyntec example">
    <div class="list-horizontal-container navy-blue">
        <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>

<div class="carlislesyntec 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>

<div class="carlislesyntec example">
    <div class="list-vertical-container navy-blue">
        <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.
Right and/or left vertical rule must separate each list item with adequate padding/space.

Unordered List - Vertical Implementation

No icon use.
Top and/or bottom rules must separate each list item.