Deal Cards

Components for displaying pipeline companies and investment opportunities. Two variants for public and confidential contexts.

DealCard--Micro

Compact deal card for public pipeline grids. Shows logo, company name, description, and sector badge. Supports link and non-link variants based on whether a URL is provided.

src/components/deals/DealCard--Micro.astro

Props

Prop Type Required Description

name string Yes Company display name

description string No Short description/blurb

logoLightMode string Yes Logo URL for light mode

logoDarkMode string No Logo URL for dark mode (fallback to light)

href string | null No External company URL (renders as link if provided)

sector string No Sector/category badge text

accentColor StageColor No Accent color: amber | blue | green | purple | cyan

Live Examples

Mitrix Bio

Develops bioreactor-grown mitochondrial transplantation therapies to address age-related diseases and cellular energy decline.

longevity biotech

ProfileHealth

Building AI to unleash doctors, not replace them. Agentic AI platform for clinical practices.

healthcare AI

Fortem Neuroscience

Neuroscience therapeutics company founded by Dr. Keith Black, pioneering neurosurgeon at Cedars-Sinai.

neuroscience

Encellin

Advancing next generation therapies with novel cell encapsulation and functional cell therapies.

biotech

Usage

---
import DealCardMicro from '@components/deals/DealCard--Micro.astro';
---

<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
  {deals.map((deal) => (
    <DealCardMicro
      name={deal.conventionalName}
      description={deal.blurbShortTxt}
      logoLightMode={deal.logoLightMode}
      logoDarkMode={deal.logoDarkMode}
      href={deal.urlToCompanySite}
      sector={deal.sector}
      accentColor="amber"
    />
  ))}
</div>

DealCard--Micro--Confidential

Extended deal card for confidential pipeline views. Includes action buttons for memo links and company sites, plus a key contacts section. Used in authenticated areas.

src/components/deals/DealCard--Micro--Confidential.astro

Props

Prop Type Required Description

name string Yes Company display name

description string No Short description/blurb

logo string Yes Logo URL (typically dark mode)

companySiteUrl string | null No External company URL

memoSlug string | null No Internal memo slug for /memos link

sector string No Sector/category badge

contacts PersonData[] No Key contacts list ({ name, role })

accentColor StageColor No Accent color: amber | blue | green | purple | cyan

Live Examples

Fortem Neuroscience

neuroscience

Neuroscience therapeutics company founded by Dr. Keith Black, pioneering neurosurgeon at Cedars-Sinai.

Key Contacts

Dr. Keith Black Founder

Encellin

biotech

Advancing next generation therapies with novel cell encapsulation and functional cell therapies.

ProfileHealth

healthcare AI

Building AI to unleash doctors, not replace them. Agentic AI platform for clinical practices.

Usage

---
import DealCardConfidential from '@components/deals/DealCard--Micro--Confidential.astro';
---

<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  {deals.map((deal) => (
    <DealCardConfidential
      name={deal.conventionalName}
      description={deal.blurbShortTxt}
      logo={deal.logoDarkMode || deal.logoLightMode}
      companySiteUrl={deal.urlToCompanySite}
      memoSlug={deal.resolvedMemoSlug}
      sector={deal.sector}
      contacts={deal.listOfPeopleData}
      accentColor="amber"
    />
  ))}
</div>

Accent Colors

Both components support 5 accent colors for stage-based or category-based styling.

amber Due Diligence

blue Initial Review

green Portfolio

purple Featured

cyan Watching

File Locations

src/components/deals/DealCard--Micro.astro Public pipeline card

src/components/deals/DealCard--Micro--Confidential.astro Confidential pipeline card

src/pages/pipeline/index.astro Public pipeline page

src/pages/pipeline/confidential/index.astro Confidential pipeline page