Jumbotron

A Jumbotron indicates a big box for calling extra attention to some special content or information. It provides various layouts through different variants to suit your content presentation needs.

Table of Contents

• Best Practices
• Responsive Behavior
• Variants
  • Default Variant
  • Slim Variant
  • Hero Variant
  • Post Variant
  • Post Split Variant
• Component API
• Accessibility

Best Practices

• Use the default variant for main content sections and general announcements
• Use the hero variant for page headers with background images and important messaging
• Use the post variant for blog posts and articles with full-width image overlays
• Use the post-split variant when you need to display image alongside content
• Consider using slim prop for less important or secondary sections

Responsive Behavior

The component adapts to different screen sizes:

• On mobile: Stacks content vertically, adjusts font sizes and padding
• On tablet: Optimizes layout and spacing
• On desktop: Full layout with optimal content width and spacing

Default Variant (Classic)

The default variant is ideal for primary content sections. It supports custom intro, subtitle, and CTA content with centered layout.

<Jumbotron 
  variant="default"
  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
>
    <p slot="subtitle"
      class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
    >
      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
    </p>
    <Fragment slot="cta-content">
      <Button primary rounded href="#" title="short text">
        Read More
      </Button>
    </Fragment>
</Jumbotron>

Slim Variant

A more compact version of the default variant, useful for secondary content sections or when vertical space is limited.

<Jumbotron
  variant="default"
  slim
  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
>
    <p slot="subtitle"
      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
    >
      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
    </p>
</Jumbotron>

Hero Variant

Perfect for page headers and key sections that need visual impact. Features a background image with gradient overlay and optional description and info text.

Main Hero Title

Detailed description of the hero section goes here.

Additional information can be displayed here

<Jumbotron
  variant="hero"
  title="<b>Main Hero</b> Title"
  description="Detailed description of the hero section goes here."
  info="<span>Additional</span> information can be displayed here"
  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
/>

Hero Variant without image

When used without an image, the hero variant provides a clean, simple header with a solid background color.

<Jumbotron
  variant="hero"
  title="<b>Simple Hero</b> Title"
  description="A clean and simple hero section without background image."
  info="Perfect for text-focused content sections"
/>

Hero Variant with Different Backgrounds

Hero variant supports different background classes to match your design needs.

<div class="component-preview">
    <Jumbotron
      variant="hero"
      title="<b>Blue Darker Background</b> (Default)"
      description="Uses the default bg-blue-darker background"
    />
</div>

<div class="component-preview">
    <Jumbotron
      variant="hero"
      title="<b>Blue Darkest Background</b>"
      description="Uses blue-darkest background"
      backgroundClass="bg-blue-darkest"
    />
</div>

<div class="component-preview">
    <Jumbotron
      variant="hero"
      title="<b>Accent Background</b>"
      description="Uses accent-darker background"
      backgroundClass="bg-accent-darker"
    />
</div>

<div class="component-preview">
    <Jumbotron
      variant="hero"
      title="<b>Gradient Background</b>"
      description="Uses custom gradient background"
      backgroundClass="bg-vw"
    />
</div>


## Post Variant (Full Overlay)
Designed for blog posts and articles, featuring a full-width image overlay with metadata support for author, date, and categories.

<div class="component-preview">
    <Jumbotron
      variant="post"
      title="Blog Post Title"
      image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
      categories={[
        { name: 'Technology', link: '#' },
        { name: 'Design', link: '#' }
      ]}
      author={{
        firstName: "John",
        name: "John Doe"
      }}
      date="2024-02-12"
    />
</div>

```js
<Jumbotron
  variant="post"
  title="Blog Post Title"
  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
  categories={[
    { name: 'Technology', link: '#' },
    { name: 'Design', link: '#' }
  ]}
  author={{
    firstName: "John",
    name: "John Doe"
  }}
  date="2024-02-12"
/>

Post Split Variant

A two-column layout variant for posts where image and content need equal emphasis. Great for featured articles or important announcements.

Formatted Blog Post Title Lorem Ipsum

Technology Design

John Doe - 2/12/2024

<Jumbotron
  variant="post-split"
  title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
  image="path/to/image.jpg"
  categories={[
    { name: 'Technology', link: '#' },
    { name: 'Design', link: '#' }
  ]}
  author={{
    firstName: "John",
    name: "John Doe"
  }}
  date="2024-02-12"
/>

Post Split with Custom Image Dimensions

You can customize image dimensions using imageWidth and imageHeight props. This is useful for category pages with different aspect ratios (e.g., 3:2 instead of default 16:9).

<Jumbotron
  variant="post-split"
  title="Category Title"
  image="path/to/image.jpg"
  imageWidth={600}
  imageHeight={400}
/>

Post Split Full Width

Use fullWidth prop to make the jumbotron span the full viewport width, useful for archive/category pages.

<Jumbotron
  variant="post-split"
  title="Full Width Category"
  image="path/to/image.jpg"
  imageWidth={600}
  imageHeight={400}
  fullWidth
/>

Post Split with Responsive Image Sizing

Use the imageClass prop to control image dimensions with Tailwind/UnoCSS classes. This allows responsive sizing at different breakpoints.

// Limit image width on desktop
<Jumbotron
  variant="post-split"
  title="Post with Custom Image Size"
  image="path/to/image.jpg"
  imageClass="max-w-100 lg:max-w-80"
/>

// Limit both width and height
<Jumbotron
  variant="post-split"
  title="Category with Small Image"
  image="path/to/image.jpg"
  imageClass="max-w-75 max-h-50"
/>

// Different sizes at breakpoints
<Jumbotron
  variant="post-split"
  title="Responsive Image"
  image="path/to/image.jpg"
  imageClass="max-w-full md:max-w-80 lg:max-w-100"
/>

Post Split Slim Version

Use the slim prop to reduce vertical padding and image height. Useful for secondary content or when vertical space is limited.

Slim Post Split

<Jumbotron
  variant="post-split"
  title="Slim Post Split"
  image="path/to/image.jpg"
  slim
/>

Post Split with Column Split Ratio

Use the split prop to control the column width ratio between text and image on desktop. Available options: equal (default 50/50), wide (2/3 text + 1/3 image).

Wide Split (2/3 + 1/3)

<Jumbotron
  variant="post-split"
  title="Wide Split (2/3 + 1/3)"
  image="path/to/image.jpg"
  split="wide"
/>

Post Split Slim with Wide Split

Combine slim and split="wide" for a compact layout with 2/3 + 1/3 column ratio.

Slim Wide Split

<Jumbotron
  variant="post-split"
  title="Slim Wide Split"
  image="path/to/image.jpg"
  slim
  split="wide"
/>

Post Split with Text Alignment

Use the align prop to control text alignment within the content area. Available options: left (default), center, right.

Left Aligned Content

<Jumbotron
  variant="post-split"
  title="Left Aligned Content"
  image="path/to/image.jpg"
  align="left"
/>

Center Aligned Content

<Jumbotron
  variant="post-split"
  title="Center Aligned Content"
  image="path/to/image.jpg"
  align="center"
/>

Custom Intro Slot Example

Shows how to fully customize the header section using the intro slot. Useful for complex layouts or custom styling.

<Jumbotron variant="default" slim>
    <h2 slot="intro" class="text-3xl text-white sm:text-3xl sm:pt-0 md:text-4xl lg:text-5xl">
      Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
    </h2>
    <p slot="subtitle"
      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
    >
      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
    </p>
</Jumbotron>

Component API

Common Props

• variant: Layout variant (‘default’ | ‘hero’ | ‘post’ | ‘post-split’)
  • default: ‘default’
• title: Main heading text. Supports HTML markup for styling.
• image: Image URL (required for hero, post and post-split variants)
• slim: Reduces vertical padding and height (works with default, hero, and post-split variants)

Default & Hero Props

• description: Secondary text below title (hero variant only)
• info: Additional information text (hero variant only)

Post Variants Props

• date: Publication date string
• author: Author information object
  • firstName: Author’s first name (used in title attribute)
  • name: Full author name (displayed)
• categories: Array of category objects for post categorization
  • name: Category display name
  • uri: Category link URL

Post Split Props

• imageWidth: Custom image width in pixels (default: 768)
• imageHeight: Custom image height in pixels (default: 432)
• imageClass: Tailwind/UnoCSS classes for responsive image sizing (e.g., max-w-100 lg:max-w-80)
• description: Optional description text below the title
• fullWidth: When true, adds full-width-block class for full viewport width
• align: Text alignment within content area (‘left’ | ‘center’ | ‘right’, default: ‘left’)
• split: Column width ratio on desktop (‘equal’ | ‘wide’, default: ‘equal’)
  • equal: 50/50 split between text and image
  • wide: 2/3 text + 1/3 image split

Slots

• intro: Replaces the default title with custom content. Useful for complex headings or custom markup.
• subtitle: Additional content below the title. Supports markdown and HTML.
• cta-content: Call to action content (buttons, links etc.) - wrapped in centered container.

Accessibility

• Use semantic HTML markup in slots
• Ensure proper contrast for text over background images
• Provide meaningful alt text for images
• Title text supports HTML markup for better semantics and styling