Anchor

Anchors add different types of links to your page.

Use cases:

• Creating a hyperlink to a different page
• Linking to a specific region of the current page
• An email link which pre-populates the recipient field

Example

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

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Description
Default	This elements which are contained in the anchor region, and will trigger the href when clicked.
start	Content which can be provided before the anchor content.
end	Content which can be provided after the anchor content.

Parts

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

Events fired

This component doesn't emit any events.

Events listened to

This component doesn't listen to any events.