Components / Content

LinkCard

The hover for any card that is a link: the border firms up, a faint tint and a 1px lift, with a corner → for internal links or ↗ (and a new tab) for absolute URLs. Give it the card's radius, border colour, fill and padding. linkCardClass is the same treatment for a link you render yourself. Cards that are not links stay flat.

Extracted fromMarketing site

Import

tsx

import { LinkCard, linkCardClass } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { LinkCard, linkCardClass } from "@somnia-chain/ui/next"

Examples

Internal, external and accent

Somnia MarketsAn internal link: same tab, a corner →.Somnia docsAn absolute URL: a new tab, a corner ↗.Create a venueNo corner arrow, and an accent hover border.

examples/link-card/default.tsxShow code

tsx

import { LinkCard } from "@somnia-chain/ui"

export default function LinkCardExample() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <LinkCard href="#" className="flex flex-col gap-2 rounded-[10px] border-line bg-surface p-5">
        <span className="font-medium text-[15px] text-fg">Somnia Markets</span>
        <span className="text-[13px] text-fg-3 leading-snug">An internal link: same tab, a corner →.</span>
      </LinkCard>
      <LinkCard href="https://docs.somnia.network" className="flex flex-col gap-2 rounded-[10px] border-line bg-surface p-5">
        <span className="font-medium text-[15px] text-fg">Somnia docs</span>
        <span className="text-[13px] text-fg-3 leading-snug">An absolute URL: a new tab, a corner ↗.</span>
      </LinkCard>
      <LinkCard
        href="#"
        arrow={false}
        className="flex flex-col gap-2 rounded-[10px] border-accent/30 bg-accent-soft p-5 [--link-card-hover:var(--accent)]"
      >
        <span className="font-medium text-[15px] text-fg">Create a venue</span>
        <span className="text-[13px] text-fg-3 leading-snug">No corner arrow, and an accent hover border.</span>
      </LinkCard>
    </div>
  )
}

linkCardClass on your own link

The link-card hover on your own link

examples/link-card/class.tsxShow code

tsx

import { cx, linkCardClass } from "@somnia-chain/ui"

export default function LinkCardClassExample() {
  return (
    <a href="#" className={cx(linkCardClass, "flex max-w-sm items-center gap-3 rounded-[10px] border-line bg-surface px-4 py-3")}>
      <span className="font-medium text-[14px] text-fg">The link-card hover on your own link</span>
    </a>
  )
}

Props

LinkCard

Prop	Type	Default	Description
href	string	—	Destination. Absolute http(s) URLs open in a new tab.
external	boolean	true for absolute URLs	Open in a new tab, with ↗.
arrow	boolean	true	The corner arrow. Turn it off when the card has its own Arrow, e.g. a Learn more line.
--link-card-hover	CSS variable	a firmer --fg-3	The hover border colour, e.g. var(--accent) on an accent card.
linkAs	LinkComponent	<a>	Component for internal links. @somnia-chain/ui/next sets it to next/link.
...props	<a> attributes	—	Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <a>.