Card link · Orbex Sonar-DB Design System

Examples

Links to the pages of the overview

Go to Orders Go to Deliveries Go to Balance

Code

tsx

import { CardLink } from '@orbex/sonar-components/card'

/* “Go to” and the name of the page the card summarizes */
export default function Links() {
  return (
    <>
      <CardLink href="/patterns/overview/#card-orders">Go to Orders</CardLink>
      <CardLink href="/patterns/overview/#card-deliveries">Go to Deliveries</CardLink>
      <CardLink href="/patterns/overview/#card-balance">Go to Balance</CardLink>
    </>
  )
}

Sizes, variants and states

At rest, hovered, focused and pressed

Usage

“Go to” and the name of the page: Go to Orders, Go to Deliveries.
One per card, in the footer. Rows open their details; the card link leaves the card.
It is a link, not a button: it navigates, opens in a new tab and can be copied.

Do and don’t

DoSay where it goes: “Go to” and the page’s name.

Don’t“More” or “Click here”: out of context, they say nothing.

DoOne card link, at the foot of the card.

Don’tA card link on every row: rows open their details; the card link leaves the card.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the control, and on.
Enter or Space	Follows the link.

Roles and attributes

Element or attribute	What it gives
`<a href>`	A native link: it opens in a new tab, can be copied and is listed with the page’s links.
Text	Says where it goes, “Go to Orders”, so it reads on its own in a list of links.
Arrow	Drawn and aria-hidden.

Notes

The text alone names the destination, so the link reads well in a screen reader’s list of links.

Use it

Card link shares its entry point and stylesheet with Card, Card scroll, Unit menu. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { CardLink } from '@orbex/sonar-components/card'
import '@orbex/sonar-components/card.css'

API

Props of CardLink
Prop	Type	Default
`children` Required Where it goes, as a verb phrase: Go to Orders.	`ReactNode`	—

Also takes every attribute of the native <a> , and a ref to it.