LinkCard

A hyperlink to wrap a small card of content.

It implements the <a> element.

Typically displayed in a <Scroll> component.

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

A picture link card.
import { LinkCard, Table } from 'device-agnostic-ui'

<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'

<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.