Wrapper Render Modes

Build custom sections with semantic HTML using direct render mode

What are Wrapper Render Modes?

RSL's JSON Layout API supports two wrapper render modes that control how content is structured within wrapper elements:

Standard Mode (Default)

Creates a slot-layout grid inside the wrapper element. Perfect for responsive grid layouts.

<div class="wrapper">
  <div class="slot-layout">
    <div class="slot-item">...</div>
  </div>
</div>

Direct Mode

Content goes directly inside the wrapper without slot-layout. Ideal for custom sections like footers, headers, and navbars.

<footer class="rsl-modern-footer">
  <!-- Content directly here -->
</footer>

When to Use Direct Mode

Use renderMode: "direct" when you need:

  • Semantic HTML elements (<header>, <footer>, <nav>, <section>)
  • Custom sections with their own internal layout structure
  • Components that require full control over wrapper content
  • Avoiding the automatic slot-layout grid wrapper

Example 1: Custom Footer with Direct Mode

Build a semantic footer element with custom internal structure using renderMode: "direct".

JavaScript Code • JS
const footerConfig = {
    version: 1,
    layoutId: "custom-footer",
    wrapper: {
        tag: "footer",
        classes: ["rsl-modern-footer"],
        renderMode: "direct"  // Skip slot-layout wrapper
    },
    breakpoints: { xs: 1 },
    items: [{
        id: "footer-content",
        content: {
            type: "html",
            value: `
                <div class="demo-footer-preview">
                    <div style="text-align: center;">
                        <h4>My Company</h4>
                        <p>© 2025 My Company - All rights reserved</p>
                        <p style="font-size: 0.875rem; opacity: 0.8;">
                            Built with RSL JSON Layout API
                        </p>
                    </div>
                </div>
            `
        }
    }]
};

RSL.JSONLayout.renderLayout('#demo1-output', footerConfig);

Key Points

  • wrapper.tag: "footer" creates a semantic <footer> element
  • wrapper.renderMode: "direct" skips the slot-layout grid
  • Content is inserted directly into the footer element
  • CSS classes on wrapper preserve styling (like rsl-modern-footer)

Example 2: Standard vs Direct Mode Comparison

See the difference in HTML structure between standard and direct render modes.

Standard Mode

Direct Mode

Comparison Code • JS
// Standard Mode - Creates slot-layout grid
const standardConfig = {
    version: 1,
    layoutId: "standard-section",
    wrapper: {
        tag: "section",
        classes: ["my-section"]
        // No renderMode = defaults to "standard"
    },
    breakpoints: { xs: 1 },
    items: [{
        id: "standard-content",
        content: {
            type: "html",
            value: `<div class="demo-standard-box">
                Content in slot-item
            </div>`
        }
    }]
};

// Direct Mode - No slot-layout grid
const directConfig = {
    version: 1,
    layoutId: "direct-section",
    wrapper: {
        tag: "section",
        classes: ["my-section"],
        renderMode: "direct"  // Direct mode
    },
    breakpoints: { xs: 1 },
    items: [{
        id: "direct-content",
        content: {
            type: "html",
            value: `<div class="demo-direct-box">
                Content directly in section
            </div>`
        }
    }]
};

Common Use Cases for Direct Mode

Perfect for:

Navigation Bars

Render navbars without grid constraints for full-width layouts and dropdowns.

Footer Sections

Build semantic footers with custom multi-column layouts inside.

Hero Sections

Create hero sections with custom background gradients and centered content.

Custom Sections

Any section needing full control over internal structure without grid wrappers.

Real-World Example: Complete Footer

See how the JSON API Demo page uses direct mode to render its footer:

Real Implementation • From json-api-demo.html
const footerConfig = {
    version: 1,
    layoutId: "main-footer",
    wrapper: {
        tag: "footer",
        classes: ["rsl-modern-footer"],
        renderMode: "direct"
    },
    breakpoints: { xs: 1 },
    items: [{
        id: "footer-content",
        content: {
            type: "html",
            value: `
                <div class="container">
                    <div class="rsl-footer-top">
                        <div class="slot-layout" data-cols-xs="1" data-cols-sm="2"
                             data-cols-lg="4" data-gap="2.5rem">
                            <!-- Brand Column -->
                            <div class="slot-item rsl-footer-brand">
                                <h3>Responsive Slot Layout</h3>
                                <p>Zero dependencies, fully responsive</p>
                            </div>
                            <!-- More columns... -->
                        </div>
                    </div>
                    <div class="rsl-footer-bottom">
                        <p>© 2025 RSL - All rights reserved</p>
                    </div>
                </div>
            `
        }
    }]
};

// Simple one-line render!
RSL.JSONLayout.renderLayout('#footer-container', footerConfig);

Important Note

Notice that the footer content includes its own slot-layout grid inside the HTML. Direct mode gives you complete control - you can still use RSL grids inside your custom content!

API Reference

Wrapper Configuration

Property Type Default Description
tag string "div" HTML tag for wrapper element
classes string[] [] CSS classes to apply to wrapper
renderMode "standard" | "direct" "standard" Render mode: standard creates slot-layout, direct skips it
id string undefined Optional ID for wrapper element
data object {} Data attributes (data-* attributes)