Link

Color and style variations for anchor links

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.

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

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.

Learn more about Thumbtack on Facebook .

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

House Cleaning

152 Pros near you

<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 visually look like buttons.

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

Write a review

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