spoko-design-system 1.20.0 → 1.21.1

package/src/pages/components/jumbotron.mdx

@@ -1,531 +1,531 @@
----
-title: "Jumbotron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbotron from '../../components/Jumbotron.astro'
-import Button from '../../components/Button.vue'
-
-# 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](#best-practices)
-- [Responsive Behavior](#responsive-behavior)
-- [Variants](#variants)
-  - [Default Variant](#default-variant-classic)
-  - [Slim Variant](#slim-variant)
-  - [Hero Variant](#hero-variant)
-  - [Post Variant](#post-variant-full-overlay)
-  - [Post Split Variant](#post-split-variant)
-- [Component API](#component-api)
-- [Accessibility](#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.
-
-<div class="component-preview !block">
-    <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>
-</div>
-
-```js
-<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.
-
-<div class="component-preview">
-    <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>
-</div>
-
-```js
-<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.
-
-<div class="component-preview">
-    <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"
-    />
-</div>
-
-```js
-<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.
-
-<div class="component-preview">
-    <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"
-    />
-</div>
-
-```js
-<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>
-```js
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Blue Darker Background</b> (Default)"
-      description="Uses the default bg-blue-darker background"
-    />
-</div>
-```
-<br/>
-
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Blue Darkest Background</b>"
-      description="Uses blue-darkest background"
-      backgroundClass="bg-blue-darkest"
-    />
-</div>
-```js
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Blue Darkest Background</b>"
-      description="Uses blue-darkest background"
-      backgroundClass="bg-blue-darkest"
-    />
-</div>
-```
-<br/>
-
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Accent Background</b>"
-      description="Uses accent-darker background"
-      backgroundClass="bg-accent-darker"
-    />
-</div>
-
-```js
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Accent Background</b>"
-      description="Uses accent-darker background"
-      backgroundClass="bg-accent-darker"
-    />
-</div>
-```
-<br/>
-
-<div class="component-preview">
-    <Jumbotron
-      variant="hero"
-      title="<b>Gradient Background</b>"
-      description="Uses custom gradient background"
-      backgroundClass="bg-vw"
-    />
-</div>
-```js
-<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.
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      categories={[
-        { name: 'Technology', link: '#' },
-        { name: 'Design', link: '#' }
-      ]}
-      author={{
-        firstName: "John",
-        name: "John Doe"
-      }}
-      date="2024-02-12"
-    />
-</div>
-
-```js
-<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).
-
-```js
-<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.
-
-```js
-<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.
-
-```js
-// 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.
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="Slim Post Split"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      slim
-    />
-</div>
-
-```js
-<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).
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="Wide Split (2/3 + 1/3)"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      split="wide"
-    />
-</div>
-
-```js
-<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.
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="Slim Wide Split"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      slim
-      split="wide"
-    />
-</div>
-
-```js
-<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`.
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="Left Aligned Content"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      align="left"
-    />
-</div>
-
-```js
-<Jumbotron
-  variant="post-split"
-  title="Left Aligned Content"
-  image="path/to/image.jpg"
-  align="left"
-/>
-```
-
-<div class="component-preview pb-0 !block">
-    <Jumbotron
-      variant="post-split"
-      title="Center Aligned Content"
-      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
-      align="center"
-    />
-</div>
-
-```js
-<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.
-
-<div class="component-preview">
-    <Jumbotron variant="default" slim>
-        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl 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>
-</div>
-
-```js
-<Jumbotron variant="default" slim>
-    <h2 slot="intro" class="text-3xl text-white sm:(text-3xl 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: "Jumbotron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbotron from '../../components/Jumbotron.astro'
+import Button from '../../components/Button.vue'
+
+# 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](#best-practices)
+- [Responsive Behavior](#responsive-behavior)
+- [Variants](#variants)
+  - [Default Variant](#default-variant-classic)
+  - [Slim Variant](#slim-variant)
+  - [Hero Variant](#hero-variant)
+  - [Post Variant](#post-variant-full-overlay)
+  - [Post Split Variant](#post-split-variant)
+- [Component API](#component-api)
+- [Accessibility](#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.
+
+<div class="component-preview !block">
+    <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>
+</div>
+
+```js
+<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.
+
+<div class="component-preview">
+    <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>
+</div>
+
+```js
+<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.
+
+<div class="component-preview">
+    <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"
+    />
+</div>
+
+```js
+<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.
+
+<div class="component-preview">
+    <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"
+    />
+</div>
+
+```js
+<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>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darker Background</b> (Default)"
+      description="Uses the default bg-blue-darker background"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Gradient Background</b>"
+      description="Uses custom gradient background"
+      backgroundClass="bg-vw"
+    />
+</div>
+```js
+<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.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      categories={[
+        { name: 'Technology', link: '#' },
+        { name: 'Design', link: '#' }
+      ]}
+      author={{
+        firstName: "John",
+        name: "John Doe"
+      }}
+      date="2024-02-12"
+    />
+</div>
+
+```js
+<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).
+
+```js
+<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.
+
+```js
+<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.
+
+```js
+// 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.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Slim Post Split"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      slim
+    />
+</div>
+
+```js
+<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).
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Wide Split (2/3 + 1/3)"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      split="wide"
+    />
+</div>
+
+```js
+<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.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Slim Wide Split"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      slim
+      split="wide"
+    />
+</div>
+
+```js
+<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`.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Left Aligned Content"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      align="left"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Left Aligned Content"
+  image="path/to/image.jpg"
+  align="left"
+/>
+```
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Center Aligned Content"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      align="center"
+    />
+</div>
+
+```js
+<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.
+
+<div class="component-preview">
+    <Jumbotron variant="default" slim>
+        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl 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>
+</div>
+
+```js
+<Jumbotron variant="default" slim>
+    <h2 slot="intro" class="text-3xl text-white sm:(text-3xl 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