Link

Link element is used to call app actions and for navigation between pages (routes)

<a class="link" href="path/to/somewhere">Link Text</a>

If you use link with icon and text, then the following layout is recommended:

<a class="link" href="path/to/somewhere">
  <i class="icon"></i>
  <span>Link Text</span>
</a>

If you use link with icon only, then:

<a class="link icon-only" href="path/to/somewhere">
  <i class="icon"></i>
</a>

It is possible to bypass F7 link handler (if you want to add custom logic to link, or want it to direct to external website). In this case we need additional external class:

<a class="link external" href="http://google.com">Open Google</a>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios {
  --f7-link-pressed-opacity: 0.3;
}
.aurora {
  --f7-link-pressed-opacity: 0.3;
  --f7-link-hover-opacity: 0.65;
}