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.

Slim Variant

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

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

Hero Variant without image

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

Hero Variant with Different Backgrounds

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

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

TechnologyDesign

John Doe-2/12/2024

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).

Post Split Full Width

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

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.

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

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)

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

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

Center Aligned Content

Custom Intro Slot Example

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

Props

Common

Default & Hero

Post variants

Post Split

Slots

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