Semantic link component with flexible typography and styling variants. Renders a styled anchor element with optional...

Semantic link component with flexible typography and styling variants. Renders a styled anchor element with optional variant treatments and size options. Use for all text-based navigation and hyperlinks within content. ### Variants - **Default**: Standard text link (most common) - **display**: Larger, more prominent (article titles, featured links) - **secondary**: Smaller, muted (supplementary links, cross-references) ### Patterns - Inline link within paragraphs: standard variant - Linked article title: use `variant="display"` - Related link list: use `variant="secondary"` - Dark background: set `inverted`

<ed-text-link></ed-text-link>

Properties

Name Type Default Description
href String string Semantic link component with flexible typography and styling variants. Renders a styled anchor element with optional variant treatments and size options. Use for all text-based navigation and hyperlinks within content. ### Variants - **Default**: Standard text link (most common) - **display**: Larger, more prominent (article titles, featured links) - **secondary**: Smaller, muted (supplementary links, cross-references) ### Patterns - Inline link within paragraphs: standard variant - Linked article title: use `variant="display"` - Related link list: use `variant="secondary"` - Dark background: set `inverted` / export class EdTextLink extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** The link URL destination.
variant String 'display' | 'secondary' Visual variant controlling prominence and scale. - `display`: Large, prominent link (article titles, featured items) - `secondary`: Small, muted link (supplementary, cross-reference) If not set, renders as standard text link.
size String 'sm' Size variant for reducing typography scale. - `sm`: Smaller than default If not set, uses default size.
inverted Boolean boolean Inverted color variant for dark backgrounds. Adjusts link color for proper contrast on dark surfaces.

Slots

Name Description
- Link text content
linkAfter Optional content appended after the link text (e.g., icon)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/text-link/text-link.ts