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
  • Small 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 small 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>

Small Variant

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

<Jumbotron 
  variant="default"
  small
  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"
/>

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" small>
    <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)

Default & Hero Props

• small: Reduces vertical padding (useful for secondary content)
• 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

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