spoko-design-system 0.9.3 → 0.9.5

package/src/pages/components/jumbotron.mdx

@@ -1,360 +1,360 @@
----
-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)
-  - [Small Variant](#small-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 `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.
-
-<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>
-```
-
-## Small 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"
-      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>
-</div>
-
-```js
-<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.
-
-<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="http://localhost:1234/_image?href=https%3A%2F%2Fimg.freepik.com%2Ffree-photo%2Fnature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg%3Fsize%3D960%26ext%3Djpg&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"
-/>
-```
-
-## 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" small>
-        <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" small>
-    <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)
-
-### 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: "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)
+  - [Small Variant](#small-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 `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.
+
+<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>
+```
+
+## Small 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"
+      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>
+</div>
+
+```js
+<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.
+
+<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="http://localhost:1234/_image?href=https%3A%2F%2Fimg.freepik.com%2Ffree-photo%2Fnature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg%3Fsize%3D960%26ext%3Djpg&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"
+/>
+```
+
+## 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" small>
+        <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" small>
+    <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)
+
+### 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