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/public/components/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

Deep import.
import LinkCard from 'device-agnostic-ui/public/components/LinkCard.js';
Deep require.
const LinkCard = require('device-agnostic-ui/public/components/LinkCard.js');
Index import. Convenient, but technically inferior to a deep import.
import { LinkCard } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { LinkCard } = require('device-agnostic-ui');
A picture link card.
import { LinkCard, Table } from 'device-agnostic-ui';

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, Table } from 'device-agnostic-ui';

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.