Link

• Link Layout
• Bypass Links Handler
• CSS Variables

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

Link Layout

<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>

Bypass Links Handler

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;
}