Links

Links are often the navigational building blocks in a website or digital product. There are several variations of links available in LUCI.

Copied to clipboard
<a class="luci-link" href="#"> Standard Link </a>
Copied to clipboard
<a class="luci-link luci-link--on-dark" href="#"> Standard Link </a>

Use a link with an icon when there is a need to distinguish the link from standard text links and to provide a tie-in with the link’s interaction, such as associating a print icon with a print action.

Copied to clipboard
<a class="luci-link" href="#">
    <svg class="luci-icon luci-link__icon luci-link__icon--left" aria-hidden="true">
        <use xlink:href="/icons/luci.svg#download">
        </use>
    </svg>
    <span class="luci-link__text"> Link with Icon </span>
</a>
Copied to clipboard
<a class="luci-link luci-link--on-dark" href="#">
    <svg class="luci-icon luci-link__icon luci-link__icon--left" aria-hidden="true">
        <use xlink:href="/icons/luci.svg#download">
        </use>
    </svg>
    <span class="luci-link__text"> Link with Icon </span>
</a>

Use a CTA link as a more prominent call to action on a page most often as a lighter weight alternative to the button component. However, CTA links, can be used in conjunction with primary and secondary buttons for a tertiary or less important action on the page.

Copied to clipboard
<a class="luci-link luci-link--cta" href="#">
    <span class="luci-link__text"> All Caps Link </span>
    <svg class="luci-icon luci-link__icon luci-link__icon--right" aria-hidden="true">
        <use xlink:href="/icons/luci.svg#navigate-forward">
        </use>
    </svg>
</a>

On Dark (on Dark Background)

Copied to clipboard
<a class="luci-link luci-link--cta luci-link--on-dark" href="#">
    <span class="luci-link__text"> All Caps Link </span>
    <svg class="luci-icon luci-link__icon luci-link__icon--right" aria-hidden="true">
        <use xlink:href="/icons/luci.svg#navigate-forward">
        </use>
    </svg>
</a>

Class Reference

Class Applies to Outcome

.luci-link

<a>

Adds link styles.

.luci-link--on-dark

.luci-link

Creates a link for use on dark backgrounds.

.luci-link--cta

.luci-link

Adds “Call to Action” styles to link.

.luci-link__icon--left

.luci-link__icon

Adds left icon and padding for text label.

.luci-link__icon--right

.luci-link__icon

Adds right icon and padding for text label.