Section

Full-width page section for grouping content with themes

Overview

The Section element is the top-level container for organizing page content. It renders as a <section> HTML tag and provides a full-width background area that can hold containers, columns, and other nested elements.

Sections are the primary building blocks for page structure. Use them to create distinct visual areas on your page, such as a hero banner, features section, testimonials area, or call-to-action block.

Key Features

  • Full-width backgrounds: Sections span the full width of the viewport, allowing background colors, images, or gradients to extend edge-to-edge
  • Theme support: Apply theme-light or theme-dark classes to control text and element colors within the section
  • Default padding: Sections include py-12 (3rem vertical padding) by default for consistent spacing
  • Semantic markup: Renders as <section> for proper document structure and accessibility
Page Structure

A typical page consists of multiple Sections, each containing a Container to center the content. This Section > Container pattern ensures full-width backgrounds while keeping content properly aligned.

Settings

Configure the Section element using these settings in the Inspector panel:

Setting Description Default
Theme Apply theme-light or theme-dark class to control child element colors. Light themes use dark text, dark themes use light text. None
Full Width When enabled, removes any max-width constraints to ensure the section extends to the full viewport width. Off
Background Set a background color, image, or gradient using the Background controls in the Inspector. None (transparent)
Padding Vertical padding controls the space above and below the section content. Adjust via the Spacing section in the Inspector. py-12 (3rem)

Examples

Basic Section with Container

The most common pattern is a Section containing a Container to center content:

<section class="py-12">
  <div class="container mx-auto">
    <h2>Section Title</h2>
    <p>Your content goes here...</p>
  </div>
</section>

Dark Themed Section

Apply a dark background with light text using the theme class:

<section class="py-12 bg-slate-900 theme-dark">
  <div class="container mx-auto">
    <h2 class="text-white">Dark Section</h2>
    <p class="text-slate-300">Content with light text on dark background.</p>
  </div>
</section>

Full-Width Background Image Section

Create a hero section with a background image:

<section class="py-24 bg-cover bg-center bg-no-repeat theme-dark"
         style="background-image: url('hero-image.jpg')">
  <div class="container mx-auto text-center">
    <h1 class="text-4xl font-bold text-white">Welcome</h1>
    <p class="text-xl text-white/80 mt-4">Your tagline here</p>
  </div>
</section>

Gradient Background Section

Use Tailwind gradient utilities for colorful backgrounds:

<section class="py-16 bg-gradient-to-r from-blue-500 to-purple-600 theme-dark">
  <div class="container mx-auto">
    <h2 class="text-white">Gradient Section</h2>
    <p class="text-white/90">A vibrant gradient background.</p>
  </div>
</section>

Best Practices

  • Always nest a Container: Place a Container inside each Section to center and constrain content width
  • Use themes consistently: Apply theme-dark when using dark backgrounds so child elements adapt their colors
  • Vary vertical padding: Use larger padding (py-16, py-24) for hero sections and smaller padding (py-8) for compact sections
  • Semantic structure: Each Section should represent a distinct content area with a clear purpose
  • Container – Center content with responsive max-width
  • Grid Columns – Create multi-column layouts within sections
  • Div – Flexible container for custom layouts