# Link

> Underlined links in the primary color, with secondary and contrast variants and a marker for the current page.

Page: https://pico.rusticstack.com/docs/content/link

Links are underlined and use the primary color. Hover, focus and active states switch to the hover color, and keyboard focus shows a ring.

**Example: Links**

```html
<p>
  <a href="#">Primary link</a><br />
  <a href="#" class="secondary">Secondary link</a><br />
  <a href="#" class="contrast">Contrast link</a>
</p>
```

## Current page

`aria-current` marks the link for the current page. It takes the hover color, so it works in navigation without a class. A value of `false` is ignored.

**Example: aria-current**

```html
<p>
  <a href="#">Home</a> /
  <a href="#" aria-current="page">Current page</a>
</p>
```

## Links that are not anchors

The same styles apply to any element with `role="link"`. Use it only when an `<a href>` is not possible, and add `tabindex="0"` and keyboard handling yourself.

**Example: role=link**

```html
<span role="link" tabindex="0">Looks like a link</span>
```

An `<a>` with `role="button"` is not styled as a link. It is a [button](/docs/content/button).

## Accessibility

The underline stays on by default, so links do not depend on color alone. Use a meaningful link text rather than "click here", and give `aria-current="page"` to the link that matches the page.

## Customization

Link styles read the primary, secondary and contrast variables, so [changing the theme](/docs/customization/themes) changes links too.

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-primary` |  | Link color. |
| `--pico-primary-hover` |  | Link color on hover, focus, active and aria-current. |
| `--pico-primary-underline` |  | Underline color. |
| `--pico-primary-hover-underline` |  | Underline color on hover. |
| `--pico-primary-focus` |  | Color of the keyboard focus ring. |
| `--pico-secondary` |  | Color of .secondary links. Hover, underline and hover underline variants follow the same naming. |
| `--pico-contrast` |  | Color of .contrast links, with the same variants. |

In the [classless build](/docs/getting-started/class-less-version) there are no `.secondary` or `.contrast` links.