@thumbtack/tp-ui-element-link v0.1.10

package: '@thumbtack/tp-ui-element-link' kit: link/index.mdx platform: scss url: /components/link/scss/

mdxType: componentApi

import '@thumbtack/tp-ui-element-type'; import '@thumbtack/tp-ui-element-button'; import '@thumbtack/tp-ui-element-link';

Link styles

The tp-link classes are used to style anchor tags.

Blue links are the most common link style. No CSS class is needed since the style is applied globally.

<React.Fragment>
    Learn more about <a href="https://www.facebook.com/Thumbtack/">Thumbtack on Facebook</a>.
</React.Fragment>

Secondary link color

<a class="tp-link--secondary" href="https://www.thumbtack.com/privacy/">
    Privacy Policy
</a>

Tertiary link color

These links render as white text with an underline. They work well on dark backgrounds.

<div class="tp-color--white">
    Learn more about{' '}
    <a class="tp-link--tertiary" href="https://www.facebook.com/Thumbtack/">
        Thumbtack on Facebook
    </a>
    .
</div>

Inherit link color

Links render as blue by default because of a global style applied to tags. This causes problems when wrapping multiple HTML elments in an anchor.

The tp-link--inherit class undoes the global styling, resetting the link style so that it inherits the parent element’s color.

<a href="https://example.com/" class="tp-link--inherit">
    <div class="tp-title-3">House Cleaning</div>
    <p>152 Pros near you</p>
</a>

Links that look like buttons

You can use tp-button classes to create links that visaully look like buttons.

Take a look at the tp-button documentation for more examples.

<a href="https://example.com/" class="tp-button">
    Write a review
</a>