@wmcadigital/ui-link

Styles and behaviour for links, visited states and chevrons.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-link

Using npm:

npm install @wmcadigital/ui-link

Using yarn:

yarn add @wmcadigital/ui-link

What this package provides

• SCSS source in src/styles/main.scss and compiled CSS at dist/styles/main.css.
• Styling for anchor elements and utility classes:
  • .ds-link — primary link style (bold, underlined, uses --color-cta).
  • .ds-link--with-chevron — inline-flex link variant that positions a chevron icon.
  • .ds-link__chevron and modifiers (--left, --right, --down) — chevron icon sizing/placement.
  • .hvr-icon-hang — helper for a hoverable icon that shows a labelled affordance.
  • .collapse — simple collapse helper used with expand/collapse patterns.

This package is styling-first; it does not export JavaScript components. Import the CSS to apply these styles.

Usage

Basic link:

<a class="ds-link" href="/path">Read more</a>

Link with a right chevron:

<a class="ds-link ds-link--with-chevron" href="/path">
  Read more
  <svg class="ds-link__chevron ds-link__chevron--right" aria-hidden="true" viewBox="0 0 24 24">
    <!-- svg -->
  </svg>
</a>

Collapsible region trigger example:

<button class="hvr-icon-hang" aria-expanded="false" data-html-text="View more">
  <span class="hvr-icon">▾</span>
</button>
<div class="collapse">Hidden content</div>

Notes:

• The base rule also targets plain a elements that don't already have a design-system class to help with consistency (see the a:not([class*='ds-']) selectors).
• Colours and fonts follow the monorepo design tokens (--color-cta, --color-primary, etc.).

Accessibility

• Mark chevron icons aria-hidden="true" and provide descriptive link text.
• For expandable controls using .hvr-icon-hang, ensure aria-expanded is updated and visible labels are provided via data-html-text where required.

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.

# Link

Styles and behaviour for links, visited states and underlines.

## Usage

Use anchor elements with the provided classes to style links consistently.

link

Links should be used when a users action won’t affect the website at all

Usage

import { hello } from '@wmcadigital/ui-link';