Links

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

Standard Link

Standard Link Standard Link Hover Standard Link Focus

Copied to clipboard

<a class="luci-link" href="#"> Standard Link </a>

Standard Link (On Dark Background)

Standard Link Standard Link Hover Standard Link Focus

Copied to clipboard

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

Link With Icon

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.

Link with Icon Link with Icon Hover Link with Icon Focus

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>

Link With Icon (on Dark Background)

Link with Icon Link with Icon Hover Link with Icon Focus

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>

CTA Link

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.

All Caps Link All Caps Link Hover All Caps Link Focus

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)

All Caps Link All Caps Link Hover All Caps Link Focus

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.