LinkCard

A hyperlink to wrap a small card of content.

It implements the <a> element.

Typically displayed in a <Scroll> component.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import "device-agnostic-ui/LinkCard.css";

Props

active

TypeBoolean (optional)
Defaultfalse

Does the link refer to the current page.

...props

Type…* (optional)

Additional props for the container; an <a> element.

Examples

How to import.
import LinkCard from "device-agnostic-ui/LinkCard.mjs";
A picture link card.
import LinkCard from "device-agnostic-ui/LinkCard.mjs";
import Table from "device-agnostic-ui/Table.mjs";

const result = (
  <LinkCard href="/static/example-picture/example.svg">
    <Picture width={157} height={100} style={{ width: "157px" }}>
      <img
        src="/static/example-picture/example.svg"
        alt="Device Agnostic UI logo."
      />
    </Picture>
  </LinkCard>
);
Device Agnostic UI logo.
An active picture link card.
import LinkCard from "device-agnostic-ui/LinkCard.mjs";
import Table from "device-agnostic-ui/Table.mjs";

const result = (
  <LinkCard active href="/static/example-picture/example.svg">
    <Picture width={157} height={100} style={{ width: "157px" }}>
      <img
        src="/static/example-picture/example.svg"
        alt="Device Agnostic UI logo."
      />
    </Picture>
  </LinkCard>
);
Device Agnostic UI logo.