Panel links

Codebase panel links are modified <a href=""> (links) where you want only some of the text to behave as the “link text” but then you have other text and/or an icon or image. Examples would be a media object, card or hero component, where you want the whole thing to behave as a “big button”.

Simple panel link example

You need two utility classes: panel-link and panel-link-title — plus, you will need to set your choice of color on your other text:

Panel link title

Lorem ipsim dolor sit amet ...

<a class="panel-link" href="#/">
    <p class="panel-link-title">Panel link title</p>
    <p class="t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

Notes on panel links

1. panel-link provides display: block (so that the <a href=""> behaves as a block and not an inline element), puts out of gear the default link styling, and provides a :focus-visible focus ring.
2. panel-link-title makes the panel link title look like the link by adding back the link color and underline link hover color, and the link hover color and thicker underline. It will also apply the default :focus-visible style to the title. So, panel links get a combination of both focus state styles.
3. The link functionality is still handled by the wrapper <a href=""> tag. panel-link-tite doesn’t actually make an element operate like a link.
4. You can change the link text color on the <a class="panel-link" href=""> as normal. This will change the color or all text in the panel link. But For your other text within the panel link (everything that’s not your panel-link-title), you need to specify the color you want it to be — otherwise it will still be the link color.

Note: Previously in Codebase, panel link styling has been provided by t-link-inside and t-link utility classes. These are still available (for backwards compatibility) but they will be deprevated.

Panel links and underline indicators

You can combine panel-link with t-no-underline (on the link wrapper):

Panel link title

Lorem ipsim dolor sit amet ...

<a class="mb-2 b-thin hover:bs-3 p-2 panel-link t-no-underline" href="#/">
    <p class="h4 mb-1 panel-link-title">Panel link title</p>
    <p class="mb-0 t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

(Also in the example above, a box shadow on hover has ben supplied by a Codebase box shadow, to indicate that the link still works.)

And you can combine panel-link with t-underline-hover-only:

Panel link title

Lorem ipsim dolor sit amet ...

<a class="mb-2 b-thin p-2 panel-link t-underline-hover-only" href="#/">
    <p class="h4 mb-1 panel-link-title">Panel link title</p>
    <p class="mb-0 t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

Another example: adding in different text colors:

Panel link title

Lorem ipsim dolor sit amet ...

<a class="panel-link t-underline-hover-only t-green-500 hover:t-green-600" href="#/">
    <p class="panel-link-title">Panel link title</p>
    <p class="t-gray-500">Lorem ipsim dolor sit amet ...</p>
</a>

Example: media object as a panel link

In this example, the entire media object is a link.