Build / Organisms

CompanyProfileCard

organism
play-fn

A company's own card — what you see when you turn a company-branded person's card over, or open the company from it.

Where CompanyCard is a company in a list — a logo, a line, a count of people you know — this is the company speaking for itself: its wordmark, its tagline, where to find it, and who works there, over the company's cover photo. It is the same physical object as every other card in Deck: a fixed 1.75:1 box lying down, 1:1.75 stood up.

Lying down, the wordmark takes the left third and the words the right, with a rule between them. Stood up, the wordmark heads the card.

The box never grows. The tagline clamps, the description is the first thing to go on a small card and the faces the second, and pills that run out of room fade at the edge rather than wrapping the card taller.

import { CompanyProfileCard } from '@meetcard/deck'

Example

<CompanyProfileCard name="MeetCard" logoSrc={wordmark} coverSrc={cover} tagline="Meet people. Remember them." links={[{ icon: <Globe />, label: 'meetcard.io', href: 'https://meetcard.io' }]} />

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.

A company speaking for itself, as its own card. Reach for it where a person's company-branded card turns over, or when someone opens the company from it — CompanyCard is the company in a list.

Default

Source

const Default = () => <CompanyProfileCard
    name="MeetCard"
    logoSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="184" height="48" viewBox="0 0 184 48">
         <rect x="2" y="8" width="22" height="32" rx="4" fill="#faf8f4" opacity="0.7"/>
         <rect x="12" y="4" width="22" height="32" rx="4" fill="#faf8f4"/>
         <text x="44" y="33" font-family="Inter, sans-serif" font-size="24" font-weight="600" fill="#faf8f4">MeetCard</text>
       </svg>`,
    )}
    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="#dbeee4"/>
         <path d="M0 210 L120 90 L210 170 L300 60 L420 180 L560 110 L560 320 L0 320 Z" fill="#a9cdb9"/>
         <rect y="240" width="560" height="80" fill="#6f9d7f"/>
       </svg>`,
    )}
    tagline="Meet people. Remember them."
    description="MeetCard turns in-person introductions into durable professional connections."
    links={[
      { icon: <Globe />, label: 'meetcard.io', href: 'https://meetcard.io' },
      { icon: <Pin />, label: 'Boulder, CO' },
      {
        icon: <In />,
        label: 'LinkedIn',
        href: 'https://www.linkedin.com/company/meetcard',
        iconOnly: true,
      },
      { icon: <Qr />, label: 'Share' },
    ]}
    people={[
      { name: 'Hannah Davis' },
      { name: 'Marcus Chen' },
      { name: 'Priya Raman' },
      ...Array.from({ length: 9 }, (_, i) => ({ name: `Colleague ${i + 1}` })),
    ]}
    actions={(<>
      <IconButton label="Back" icon={<Back />} variant="secondary" size="sm" />
      <IconButton label="Expand card" icon={<Expand />} variant="secondary" size="sm" />
    </>)} />;

On a phone the card stands up and the wordmark heads it — the same card, turned, as every other card in Deck.

On A Phone

Source

const OnAPhone = () => <CompanyProfileCard
    name="MeetCard"
    logoSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="184" height="48" viewBox="0 0 184 48">
         <rect x="2" y="8" width="22" height="32" rx="4" fill="#faf8f4" opacity="0.7"/>
         <rect x="12" y="4" width="22" height="32" rx="4" fill="#faf8f4"/>
         <text x="44" y="33" font-family="Inter, sans-serif" font-size="24" font-weight="600" fill="#faf8f4">MeetCard</text>
       </svg>`,
    )}
    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="#dbeee4"/>
         <path d="M0 210 L120 90 L210 170 L300 60 L420 180 L560 110 L560 320 L0 320 Z" fill="#a9cdb9"/>
         <rect y="240" width="560" height="80" fill="#6f9d7f"/>
       </svg>`,
    )}
    tagline="Meet people. Remember them."
    description="MeetCard turns in-person introductions into durable professional connections."
    links={[
      { icon: <Globe />, label: 'meetcard.io', href: 'https://meetcard.io' },
      { icon: <Pin />, label: 'Boulder, CO' },
      {
        icon: <In />,
        label: 'LinkedIn',
        href: 'https://www.linkedin.com/company/meetcard',
        iconOnly: true,
      },
      { icon: <Qr />, label: 'Share' },
    ]}
    people={[
      { name: 'Hannah Davis' },
      { name: 'Marcus Chen' },
      { name: 'Priya Raman' },
      ...Array.from({ length: 9 }, (_, i) => ({ name: `Colleague ${i + 1}` })),
    ]}
    actions={(<>
      <IconButton label="Back" icon={<Back />} variant="secondary" size="sm" />
      <IconButton label="Expand card" icon={<Expand />} variant="secondary" size="sm" />
    </>)} />;

A small card, and what gives: the sentence goes first, then the faces. The box keeps its shape and nothing spills past its edge.

Small

Source

const Small = () => <CompanyProfileCard
    name="MeetCard"
    logoSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="184" height="48" viewBox="0 0 184 48">
         <rect x="2" y="8" width="22" height="32" rx="4" fill="#faf8f4" opacity="0.7"/>
         <rect x="12" y="4" width="22" height="32" rx="4" fill="#faf8f4"/>
         <text x="44" y="33" font-family="Inter, sans-serif" font-size="24" font-weight="600" fill="#faf8f4">MeetCard</text>
       </svg>`,
    )}
    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="#dbeee4"/>
         <path d="M0 210 L120 90 L210 170 L300 60 L420 180 L560 110 L560 320 L0 320 Z" fill="#a9cdb9"/>
         <rect y="240" width="560" height="80" fill="#6f9d7f"/>
       </svg>`,
    )}
    tagline="Meet people. Remember them."
    description="MeetCard turns in-person introductions into durable professional connections."
    links={[
      { icon: <Globe />, label: 'meetcard.io', href: 'https://meetcard.io' },
      { icon: <Pin />, label: 'Boulder, CO' },
      {
        icon: <In />,
        label: 'LinkedIn',
        href: 'https://www.linkedin.com/company/meetcard',
        iconOnly: true,
      },
      { icon: <Qr />, label: 'Share' },
    ]}
    people={[
      { name: 'Hannah Davis' },
      { name: 'Marcus Chen' },
      { name: 'Priya Raman' },
      ...Array.from({ length: 9 }, (_, i) => ({ name: `Colleague ${i + 1}` })),
    ]}
    actions={(<>
      <IconButton label="Back" icon={<Back />} variant="secondary" size="sm" />
      <IconButton label="Expand card" icon={<Expand />} variant="secondary" size="sm" />
    </>)}
    orientation="landscape" />;

Without a wordmark or a cover — the name set in type, over the brand under the same scrim. Quieter, not broken.

Without Images

Source

const WithoutImages = () => <CompanyProfileCard
    name="MeetCard"
    logoSrc={undefined}
    coverSrc={undefined}
    tagline="Meet people. Remember them."
    description="MeetCard turns in-person introductions into durable professional connections."
    links={[
      { icon: <Globe />, label: 'meetcard.io', href: 'https://meetcard.io' },
      { icon: <Pin />, label: 'Boulder, CO' },
      {
        icon: <In />,
        label: 'LinkedIn',
        href: 'https://www.linkedin.com/company/meetcard',
        iconOnly: true,
      },
      { icon: <Qr />, label: 'Share' },
    ]}
    people={[
      { name: 'Hannah Davis' },
      { name: 'Marcus Chen' },
      { name: 'Priya Raman' },
      ...Array.from({ length: 9 }, (_, i) => ({ name: `Colleague ${i + 1}` })),
    ]}
    actions={(<>
      <IconButton label="Back" icon={<Back />} variant="secondary" size="sm" />
      <IconButton label="Expand card" icon={<Expand />} variant="secondary" size="sm" />
    </>)} />;

Just the name and the tagline — every other row is optional, and the card is the same size without them.

Minimal

Source

const Minimal = () => <CompanyProfileCard
    name="MeetCard"
    logoSrc={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="184" height="48" viewBox="0 0 184 48">
         <rect x="2" y="8" width="22" height="32" rx="4" fill="#faf8f4" opacity="0.7"/>
         <rect x="12" y="4" width="22" height="32" rx="4" fill="#faf8f4"/>
         <text x="44" y="33" font-family="Inter, sans-serif" font-size="24" font-weight="600" fill="#faf8f4">MeetCard</text>
       </svg>`,
    )}
    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="#dbeee4"/>
         <path d="M0 210 L120 90 L210 170 L300 60 L420 180 L560 110 L560 320 L0 320 Z" fill="#a9cdb9"/>
         <rect y="240" width="560" height="80" fill="#6f9d7f"/>
       </svg>`,
    )}
    tagline="Meet people. Remember them."
    description={undefined}
    links={undefined}
    people={undefined}
    actions={undefined} />;

Props

Prop	Type	Default	Description
`name`required	`string`	—	The company. The card's heading, spoken even when a logo shows it.
`actions`	`ReactNode`	—	Controls along the top edge — usually a back and an expand `IconButton`. They sit at either end of the row.
`description`	`string`	—	A sentence under the tagline. The first thing to go when space runs out.
`eyebrow`	`string`	`'Company profile'`	Small caps above the tagline. "Company profile" by default.
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Heading level for the name. `2` by default.
`links`	`CompanyProfileCardLink[]`	—	Website, location, socials, share — one pill each, on one row.
`logoSrc`	`string`	—	The company's wordmark. Falls back to the name, set in type.
`people`	`AvatarGroupPerson[]`	—	The people you can meet there, as a stack of faces.
`peopleLabel`	`string`	—	Accessible name for the faces. "People at {name}" by default.
`tagline`	`string`	—	What the company says about itself, big — "Meet people. Remember them."

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