Link
An underlined link in the accent colour. The target is set with the href property.
Examples
Properties
| Name | Type | Default | Description |
|---|---|---|---|
href | string | '#' | Destination URL, passed to the inner anchor. |
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--accent | R, G, B | 86, 88, 84 | Base colour, used as rgb(var(--accent)). |
--accent-dark | R, G, B | 29, 10, 11 | Hover colour. |
--accent-light | R, G, B | 204, 204, 210 | Active (pressed) colour. |
Usage
<zakuni-link href="/button">Button</zakuni-link>href defaults to # when omitted.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('zakuni-link')
export class ZakuniLink extends LitElement {
@property({ type: String })
href = '#';
static styles = css`
a {
color: rgb(var(--accent));
text-decoration: underline;
}
a:hover {
color: rgb(var(--accent-dark));
}
a:active {
color: rgb(var(--accent-light));
}
`;
render() {
// Kept on one line so no whitespace text nodes end up around the anchor.
return html`<a href=${this.href}><slot></slot></a>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-link": ZakuniLink;
}
}