Section
Section
The XMarkSection component is the layout primitive every marketing page is built on. It renders a full-width <section> with consistent vertical padding, a max-width container, and slots for an optional background image (with parallax), optional background pattern, and any custom inner content. The bg prop accepts either a variant string or a full background object when you need finer control.
Components
<XMarkSection />
Default usage with a variant and padding:
<XMarkSection bg="subtle" padding="lg">
<h2>Built for teams that ship</h2>
<p>Everything you need to launch a marketing site in a day.</p>
</XMarkSection>
Full background object — pattern + tinted background image with overlay:
<XMarkSection
:bg="{
variant: 'default',
color: 'bg-amber-50 dark:bg-amber-950',
pattern: 'waves',
patternOpacity: 0.08,
image: '/images/bg-team.jpg',
imageAlt: 'Team collaborating',
imageOverlay: 'gradient',
imagePosition: 'object-center',
parallax: true,
parallaxSpeed: 0.3
}"
padding="xl"
container="lg"
>
<XMarkHero ... />
</XMarkSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bg | string | object | {} | Background config. String = variant shorthand ('default' | 'subtle' | 'elevated' | 'bold' | 'transparent'). Object accepts { variant, color, image, imageAlt, imageOverlay, imagePosition, pattern, patternOpacity, parallax, parallaxSpeed }. color (Tailwind classes) overrides variant. |
padding | string | 'lg' | Vertical padding scale: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'. |
container | string | 'lg' | Max-width container: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'none'. 'sm' ≈ 42rem, 'md' ≈ 64rem, 'lg' ≈ 80rem, 'xl' ≈ 96rem. |
bg object fields
| Field | Type | Default | Description |
|---|---|---|---|
variant | string | 'default' | One of 'default', 'subtle', 'elevated', 'bold', 'transparent'. |
color | string | '' | Raw Tailwind classes (e.g. 'bg-gradient-to-br from-primary-500 to-primary-700'). Overrides variant. |
image | string | '' | Background image URL. |
imageAlt | string | '' | Alt text for the background image. |
imageOverlay | string | '' | Overlay style: 'light', 'heavy', 'gradient'. |
imagePosition | string | 'object-center' | Any Tailwind object-* class. |
pattern | string | '' | Pattern name — see XMarkPatternBg. |
patternOpacity | number | 0.05 | Pattern opacity, 0–1. |
parallax | boolean | false | Apply parallax to the background image. |
parallaxSpeed | number | 0.3 | Parallax intensity, 0.1–1.0. |
Slots
| Slot | Description |
|---|---|
background | Replace the auto-rendered background image / pattern entirely. |
default | Section content (rendered inside the container). |
AI Context
category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkSection
use-when: >
Wrapping content in a vertically-padded, max-width-contained section with a
consistent background scheme (variant + pattern + image). This is the layout
primitive every marketing page is built on top of — wrap hero, features,
pricing, testimonials, FAQ, etc. in XMarkSection to apply padding, container
width, and background in one shot.
typical-page-section: Anywhere in a marketing page that needs padding + container + background.
PrivacyCookieConsent
Consent-aware cookie banner + preferences modal that auto-fires configured tracking scripts (GTM / GA4 / Clarity / Meta Pixel / Hotjar / etc.) only after the visitor grants consent. Drop tracking IDs into app.config.xMarketing.tracking and the banner handles the rest.
CodeBlock
Syntax-highlighted code block powered by Shiki, with optional language badge, copy-to-clipboard button, and SSR-safe ClientOnly fallback.