Anchor

Anchors enable you to show links of different types of in a page.

Use cases:

• a hyperlink to a different page
• linking to a specific region of the current page
• an email link that pre-populates the recipient field

Example

There are three working links in the example below.

External linkInternal linkMail link

Genesis

Declaration

<rapid-anchor></rapid-anchor>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-anchor href="https://genesis.global/">External link</rapid-anchor>
    <rapid-anchor href="#api">Internal link</rapid-anchor>
    <rapid-anchor href="mailto:info@genesis.global">Mail link</rapid-anchor>
`,
})
export class MyElement extends GenesisElement { }

React

Declaration

<rapid-anchor></rapid-anchor>

Usage

export function MyComponent() {
  return (
    <rapid-anchor href="https://genesis.global/">External link</rapid-anchor>
    <rapid-anchor href="#api">Internal link</rapid-anchor>
    <rapid-anchor href="mailto:info@genesis.global">Mail link</rapid-anchor>
  );
}

Angular

Declaration

<rapid-anchor></rapid-anchor>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-root',
  template: `
    <rapid-anchor href="https://genesis.global/">External link</rapid-anchor>
    <rapid-anchor href="#api">Internal link</rapid-anchor>
    <rapid-anchor href="mailto:info@genesis.global">Mail link</rapid-anchor>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent { }

API

Attributes

Attribute	Type	Description	Example
download	string | boolean	Causes the browser to treat the linked URL as a download. This attributes only works for same-origin URLs, or when using the blob: and data: schemes. Different browsers behave slightly differently for downloads, such as asking the user where to save the file or automatically saving to a downloads directory.	<rapid-anchor href="files/genesis.pdf" download>
href	string	The URL that the hyperlink points to. This is commonly to another page in your app, but it could be to a region of the current page. You can also use schemes such as mailto:, javascript:, tel:, and sms:	<rapid-anchor href="https://genesis.global/">
hreflang	string	A hint to the language of the linked document. Doesn't add any functionality itself.	<rapid-anchor href="https://genesis.global/" hreflang="en">
ping	string	A space-separated list of URLs to which to send a PING message. This is commonly used for tracking.	<rapid-anchor ping="https://genesis.global/">
referrer	string	How much of the referrer to send when the user clicks the link.	<rapid-anchor href="https://genesis.global/" referrer="no-referrer">
rel	string	The relationship of the linked URL to the current page. Examples are the next or previous page, the author's page, or to help documentation.	<rapid-anchor href="https://genesis.global/author" rel="author"> Author's page </rapid-anchor>
target	"_blank" | "_self" | "_parent"	Where to display the linked URL. Most common use is to set _blank for making the link open in a new tab or window.	<rapid-anchor href="https://genesis.global/" target="_blank">
type	string	A hint to the media type of the linked document. Doesn't add any functionality itself.	<rapid-anchor href="https://genesis.global/" type="application/pdf">

Properties

The properties of this component are all controlled via attributes.

Slots

Slot	Description
Default	The elements that are contained in the anchor region, and which trigger the href when clicked.
start	Optional content to be placed before the anchor content.
end	Optional content to be placed after the anchor content.

Parts

Part	Description
control	The anchor element.
content	The element wrapping the anchor content.

Events fired

This component doesn't emit any events.

Events listened to

This component doesn't listen to any events.