Build / Organisms

ShareCard

organism
play-fn

The card you hold up to be scanned.

A card rather than a dialog, which is what separates it from ShareSheet: this is the artifact — the same fixed box as a person's card, with the same cover behind it — shown full-screen to someone pointing a phone at it. ShareSheet is the surface you raise to share a link; this is what the other person looks at.

The code sits on white whatever the card is wearing. A QR code is read by a camera expecting dark modules on a light field, and a code tinted to match the card is a code that does not scan.

import { ShareCard } from '@meetcard/deck'

Example

<ShareCard name="Nora Whitfield" detail="Product Lead at Rivermark" location="Denver, Colorado" contacts={['nora@rivermark.com', '(303) 555-0142']} coverSrc={cover} > <QRCode value="meetcard.io/nora" /> </ShareCard>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The card held up to be scanned. Lying down from sm up, with the code in the middle and who it belongs to along the foot.

Default

Source

const Default = () => <ShareCard
    name="Nora Whitfield"
    detail="Product Lead at Rivermark"
    location="Denver, Colorado"
    contacts={['nora@rivermark.com', '(303) 555-0142']}
    coverSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="560" height="320">
         <rect width="560" height="320" fill="#fdfbf7"/>
         <circle cx="150" cy="90" r="130" fill="#ffe9c7"/>
         <circle cx="430" cy="240" r="170" fill="#dbeee4"/>
         <rect x="240" y="40" width="120" height="240" fill="#fff6e0"/>
       </svg>`,
    )}>(<QRCode value="meetcard.io/nora" size="md">
      <Matrix />
    </QRCode>)</ShareCard>;

The orientation this card is usually in: a phone held out to someone pointing another phone at it.

On A Phone

Source

const OnAPhone = () => <ShareCard
    name="Nora Whitfield"
    detail="Product Lead at Rivermark"
    location="Denver, Colorado"
    contacts={['nora@rivermark.com', '(303) 555-0142']}
    coverSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="560" height="320">
         <rect width="560" height="320" fill="#fdfbf7"/>
         <circle cx="150" cy="90" r="130" fill="#ffe9c7"/>
         <circle cx="430" cy="240" r="170" fill="#dbeee4"/>
         <rect x="240" y="40" width="120" height="240" fill="#fff6e0"/>
       </svg>`,
    )}>(<QRCode value="meetcard.io/nora" size="md">
      <Matrix />
    </QRCode>)</ShareCard>;

The words change with what is being exchanged; the card does not.

Own Wording

Source

const OwnWording = () => <ShareCard
    name="Nora Whitfield"
    detail="Product Lead at Rivermark"
    location="Denver, Colorado"
    contacts={['nora@rivermark.com', '(303) 555-0142']}
    coverSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="560" height="320">
         <rect width="560" height="320" fill="#fdfbf7"/>
         <circle cx="150" cy="90" r="130" fill="#ffe9c7"/>
         <circle cx="430" cy="240" r="170" fill="#dbeee4"/>
         <rect x="240" y="40" width="120" height="240" fill="#fff6e0"/>
       </svg>`,
    )}
    eyebrow="Scan me"
    title="Point a camera here">(<QRCode value="meetcard.io/nora" size="md">
      <Matrix />
    </QRCode>)</ShareCard>;

Without a cover photo — the brand under the same scrim.

Without A Cover

Source

const WithoutACover = () => <ShareCard
    name="Nora Whitfield"
    detail="Product Lead at Rivermark"
    location="Denver, Colorado"
    contacts={['nora@rivermark.com', '(303) 555-0142']}
    coverSrc={undefined}>(<QRCode value="meetcard.io/nora" size="md">
      <Matrix />
    </QRCode>)</ShareCard>;

Props

Prop	Type	Default	Description
`children`required	`ReactNode`	—	The code itself — a `QRCode`, or whatever your generator returns. Held in a white tile, because a QR code has to be dark-on-light to scan and this card is neither.
`name`required	`string`	—	Whose card this is.
`avatarSrc`	`string`	—	—
`contacts`	`string[]`	—	Reachable details, one per line, under the name.
`detail`	`string`	—	Role and company on one line — "Product Lead at Rivermark".
`eyebrow`	`string`	`'Exchange cards'`	Small caps above the title.
`location`	`string`	—	Where they are.
`title`	`string`	`'Scan to exchange cards'`	The instruction. "Scan to exchange cards" by default.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.