Jumbotron

Jumbotron is a large hero/banner section for prominent page introductions. It supports a title, description, action area, and an optional side image for left-aligned layouts.

ExamplesCodeUsageChangelog

Basic (centered)

Build faster with Jetpack UI

A private design system for Jetpack Labs — Vue 3 components that look great out of the box and get out of your way.

Tailwind v4

<Jumbotron
  title="Build faster with Jetpack UI"
  description="A private design system for Jetpack Labs..."
>
  <Button variant="primary">Get started</Button>
  <Button variant="secondary">View components</Button>
</Jumbotron>

Left-aligned with image

When align="left", text sits on the left and the image slot renders to the right.

Aggregate production, simplified.

Track shifts, equipment, tanks, loadouts, and sieve tests — all in one place.

Tailwind v4

<Jumbotron
  align="left"
  title="Aggregate production, simplified."
  description="Track shifts, equipment, tanks, loadouts..."
>
  <Button variant="primary">Open app</Button>
  <Button variant="secondary">Learn more</Button>
  <template #image>
    <img src="/hero.png" alt="Hero" style="border-radius:12px;max-width:360px;width:100%" />
  </template>
</Jumbotron>

Props

Prop	Type	Default	Description
title	string	—	Large heading text
description	string	—	Supporting paragraph below the title
align	'left' | 'center'	'center'	Text alignment and layout mode

Slots

Slot	Description
default	Action area — buttons or CTAs rendered below the description
image	Optional image — only visible when align="left", rendered to the right of the text