FullStack VC

Design System · Heroes

HeroBannerWithMessageHierarchy

Wraps HeroContentCoreMessage with a full-bleed image banner. Toggle modes to verify legibility in light / dark / vibrant.

Mode
Theme

height: standard · overlay: gradient · align: left (default for /projects/)

Working Groups · Peer Learning

Projects shipped together.

Active working groups in the FullStack VC community.

We don't ship for the sake of shipping. We ship to learn — and the projects below are how the community puts that into practice.

Propose a project

height: short · overlay: scrim · align: center

Center-aligned

Centered, scrim-overlaid.

For pages where the message should anchor the page rather than lead from a side.

height: tall · overlay: none · align: left · without CTA

Editorial · No overlay

Tall hero, no overlay.

Use only when the underlying image is intentionally low-contrast — otherwise the type will fight the photo.

Tall variant is for hero moments — landing pages, key narratives. Pair with editorial photography that already cooperates with the type.

Props + tokens 
<HeroBanner
  image="/og/projects.png"
  imageAlt=""
  overlay="gradient"          /* 'gradient' | 'scrim' | 'none' */
  align="left"                /* 'left' | 'center' */
  height="standard"           /* 'short' | 'standard' | 'tall' */

  contextSetterTxt="..."      /* renders into eyebrow */
  headerTxt="..."             /* renders into headline (h1) */
  subheaderTxt="..."          /* renders into subheader (h2) */
  supportingTxt="..."         /* renders into supporting paragraph */
  ctaLabelTxt="..."           /* renders into CTA button label */
  ctaHref="..."
/>

/* Tokens read */
--color-background, --color-surface, --color-text, --color-text-muted,
--color-primary, --fx-headline-gradient, --fx-card-shadow, --fx-card-shadow-hover,
--font-display, --font-body, --font-code