Build / Organisms

CompanyCard

organism
play-fn

A company as a card — the company-profile counterpart to PersonCard, and the same physical object: a fixed 1.75:1 box lying down, 1:1.75 stood up, portrait on a phone and landscape from sm up. The two sit side by side in a pile without either looking like a different kind of thing.

The box never grows. The name and industry truncate, the description clamps, and tags that run out of room stop rather than wrapping the card taller — a card is a fixed-size object, and what cannot fit on one does not belong on one.

Uses the rounded avatar shape, which reads as a logo rather than a person.

import { CompanyCard } from '@meetcard/deck'

Example

<CompanyCard name="MeetCard" industry="Developer tools" connectionCount={12} tags={['Series B', 'Remote']} />

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.

Default

Source

const Default = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard name="MeetCard" industry="Developer tools" />
</div>;

With a one-line positioning statement, clamped to the card.

With Description

Source

const WithDescription = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        description="Digital business cards that turn conversations into relationships." />
</div>;

The "who do I know here?" surface.

With Connections

Source

const WithConnections = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard name="MeetCard" industry="Developer tools" connectionCount={12} />
</div>;

Singular is handled, so the copy never reads "1 connections".

Single Connection

Source

const SingleConnection = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard name="MeetCard" industry="Developer tools" connectionCount={1} />
</div>;

With tags. They stay on one row and fade out at the edge rather than growing the card.

With Tags

Source

const WithTags = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        tags={['Series B', 'Remote', 'Hiring']} />
</div>;

Linked, so the name leads to the company's profile.

Linked

Source

const Linked = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        href="https://example.com"
        connectionCount={4} />
</div>;

With an action. It sits inside the card's edge, pinned to the bottom.

With Actions

Source

const WithActions = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        actions={(<Button size="sm" variant="secondary">Follow
                </Button>)} />
</div>;

Several companies stacked — every card the same size, whatever is on it.

In A List

Source

const InAList = () => <Stack as="ul" gap={12} style={{ maxWidth: 440 }}>
    <li>
        <CompanyCard
            name="MeetCard"
            industry="Developer tools"
            connectionCount={12}
            tags={['Series B']} />
    </li>
    <li>
        <CompanyCard name="Analytical Engines" industry="Hardware" connectionCount={3} />
    </li>
</Stack>;

The same object as a person's card: 1.75:1 lying down. Lying down is what it does from sm up, with nothing around it deciding otherwise.

Landscape

Source

const Landscape = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        description="Digital business cards that turn conversations into relationships."
        connectionCount={12}
        tags={['Series B', 'Remote']} />
</div>;

Stood up on a phone, like every card — 1:1.75, read down the middle.

On A Phone

Source

const OnAPhone = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="MeetCard"
        industry="Developer tools"
        description="Digital business cards that turn conversations into relationships."
        connectionCount={12}
        tags={['Series B', 'Remote']} />
</div>;

More than fits. The box does not grow: the name truncates, the description clamps, and the tags that run out of room stop at the edge. A card is a fixed-size object, and what cannot fit on one does not belong on one.

More Than Fits

Source

const MoreThanFits = () => <div style={{ maxWidth: 440 }}>
    <CompanyCard
        name="Northwind Collaborative Design & Research Partners"
        industry="Design research, service design and organisational strategy"
        description="An independent studio working across research, service design and strategy for public-sector and non-profit clients, with offices in Boulder, Portland and Toronto and a network of associates across North America."
        connectionCount={128}
        tags={['Series B', 'Remote', 'B Corp', 'Hiring', 'Public sector', 'Non-profit']}
        actions={(<Button size="sm" variant="secondary">Follow
                </Button>)} />
</div>;

Props

Prop	Type	Default	Description
`name`required	`string`	—	—
`actions`	`ReactNode`	—	—
`connectionCount`	`number`	—	Number of people you know there. Rendered as a badge.
`description`	`string`	—	One-line positioning statement.
`href`	`string`	—	Website or profile URL — turns the name into a link.
`industry`	`string`	—	Sector or category, e.g. "Developer tools".
`logoSrc`	`string`	—	Company logo. Falls back to the company's initial.
`orientation`	`ResolvedCardOrientation \| 'responsive'`	—	Which way up the card sits. Default `responsive`: the surrounding `CardPile`'s orientation if there is one, otherwise portrait on a phone and landscape from `sm` up.
`tags`	`string[]`	—	Free-form tags, e.g. ["Series B", "Remote"].

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