Section

Vertical spacing between major content areas.

Overview

Section is a vertical rhythm primitive that wraps major content areas with consistent top and bottom padding. It separates dashboard panels, settings groups, ecommerce sections, ERP workspaces, documentation blocks, and landing-page bands — giving every page a predictable vertical structure. Section is a pure HTML element (<section>) with responsive padding utilities; no JavaScript component is required.

Why this exists

Without a consistent section primitive, every page ends up with ad-hoc py-8, py-12, or my-16 values scattered across templates. Section standardises vertical breathing room so every major content area — dashboard stats, settings forms, data tables, feature bands — gets consistent spacing above and below. Section is the vertical counterpart to Container (horizontal width) and pairs naturally with Stack (item flow) and Grid (columns).

Mental model

Think of Section as page-level vertical spacing blocks. Each Section wraps one logical content group — a dashboard overview, a settings form, a data table panel — and applies uniform top and bottom padding. The page becomes a stack of sections, each separated by consistent breathing room. Section handles vertical rhythm; Container handles horizontal width; Stack and Grid handle internal layout.

When to use

SaaS dashboard overview sections — KPI banner, charts panel, recent activity table, each wrapped in its own Section
Admin page content groups — user management, role settings, audit log — each logical panel in a Section
Settings page groups — profile, security, notifications, billing — each form group separated by a Section
Ecommerce back-office panels — orders summary, product listings, inventory alerts, customer insights
ERP / POS workspace sections — order entry, inventory view, customer detail, payment panel
Documentation content sections — each major topic or chapter wrapped in a Section with a heading
Landing-page feature bands — hero, features grid, testimonials, pricing, CTA — each a distinct Section
Starter-kit page layouts — Laravel, React, and Vue pages using Container → Section → Stack/Grid → Card

When not to use

Do not use Section for small spacing inside cards, forms, table rows, or toolbars — use padding, Stack, or gap utilities instead
Do not nest Sections more than one level without clear headings — deeply nested sections without headings create a confusing document outline
Do not use Section only to add a background or border — use Card or a themed wrapper when the goal is a visual surface, not vertical spacing
Do not mix random py-* or my-* utilities across page sections — use consistent Section spacing for predictable rhythm
Do not add role="region" or role="main" to every Section — reserve landmark roles for meaningful document regions with headings

Basic example

A Section with default vertical padding, a heading, and content. The background highlight is for illustration only.

Analytics Overview

This section wraps a logical content area with consistent vertical spacing above and below.

<section class="py-12 lg:py-20">
  <h2 class="text-xl font-semibold text-foreground">Analytics Overview</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
    <!-- KPI cards -->
  </div>
</section>

Section rhythm

Section uses responsive vertical padding — py-12 on mobile and lg:py-20 on desktop — to create consistent breathing room between major content areas. The padding applies evenly above and below, so consecutive sections are always separated by the same gap.

Section A

py-12 lg:py-20

Section B

py-12 lg:py-20 — same spacing, consistent rhythm

Section C

py-12 lg:py-20

The default rhythm uses the standard page spacing scale. For tighter or looser layouts, adjust the vertical padding per section. Keep the same value across all sections on a given page for a predictable reading experience.

Composition patterns

Section composes naturally with the other layout primitives to form a complete page hierarchy:

Container → Section → Stack → Card — a settings page: Container provides width, Section provides vertical rhythm, Stack provides field spacing, Card provides surfaces
Container → Section → Grid → Card — a dashboard page: Container caps width, Section separates chart and table areas, Grid arranges KPI cards, Card surfaces each metric
Container → Section (alternating backgrounds) — a landing page: each section gets a light or tinted background to visually separate features, testimonials, and pricing

Anatomy

Semantic element — <section> tag representing a standalone content region in the document outline
Vertical padding — responsive py-12 lg:py-20 for consistent breathing room above and below
Optional heading — an <h1>–<h6> describing the section's purpose for document structure and assistive technology
Content area — Grid, Stack, Card, or any combination of components arranged inside the section

Usage guidelines

Wrap each major page-level content group in a Section — one logical area per section
Pair meaningful sections with headings (h2–h6) to define the document outline
Use Section with Container for readable page width — Container outside, Section inside
Use Section with Grid or Stack for internal layout — Section provides vertical rhythm, Stack/Grid provides item arrangement
Keep vertical spacing consistent across repeated product pages — all dashboard dashboards should use the same section padding
Use alternating background colours on sections (white, muted, tinted) to visually separate page areas without extra borders or dividers

Do and Don't

Do

Use Section for major page-level content groups
Pair meaningful sections with headings
Use Section with Container for readable page width
Use Section with Grid or Stack for internal layout
Keep vertical spacing consistent across repeated product pages
Use alternating backgrounds to visually separate sections

Don't

Use Section for small spacing inside cards, forms, table rows, or toolbars
Create deeply nested sections without clear headings
Use Section only to add a background or border — use Card instead
Mix random py-* or my-* values between page sections
Add unnecessary ARIA roles to visual-only sections

Accessibility

Section renders a semantic <section> element — a native HTML landmark. When used correctly, it contributes to the document outline and helps screen reader users navigate the page structure.

Use sectioning only when the grouped content has meaning. A section represents a standalone content region. If the wrapper is purely visual (e.g. spacing only), use a plain <div> instead — not every visual block needs to be a landmark.
Prefer a visible heading inside meaningful sections. An <h2>–<h6> heading gives the section an accessible name and defines its place in the document outline. If a heading is not visible, use aria-labelledby to reference an off-screen heading.
Do not add role="region" or role="main" to every Section. The <section> element already acts as a region landmark when it has an accessible name. Adding redundant roles creates noise for screen reader users. Reserve role="main" for the primary content landmark via <main>.
Keyboard behavior is inherited from the content inside the section. Section itself is not interactive. Ensure focusable elements (links, buttons, form controls) inside the section follow a logical tab order.

Customization

Section is pure HTML — there are no props to configure. Adjust vertical spacing by changing the py-* and lg:py-* utility classes. For custom backgrounds, apply bg-background, bg-muted, or theme-specific colour utilities directly on the <section> element. The same markup works identically in HTML, React, Vue, Laravel Blade, and any other server-rendered or client-rendered framework.

HTML example

<!-- Dashboard overview section with KPI cards -->
<section class="py-12 lg:py-20">
  <div class="mx-auto w-full max-w-screen-xl px-4 sm:px-6 lg:px-8">
    <h2 class="text-xl font-semibold text-foreground mb-6">Dashboard Overview</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="rounded-xl border border-border bg-card p-5 shadow-sm">
        <p class="text-sm text-muted-foreground">Revenue</p>
        <p class="text-2xl font-semibold text-foreground mt-1">$48,290</p>
      </div>
      <div class="rounded-xl border border-border bg-card p-5 shadow-sm">
        <p class="text-sm text-muted-foreground">Orders</p>
        <p class="text-2xl font-semibold text-foreground mt-1">1,342</p>
      </div>
      <div class="rounded-xl border border-border bg-card p-5 shadow-sm">
        <p class="text-sm text-muted-foreground">Conversion</p>
        <p class="text-2xl font-semibold text-foreground mt-1">3.24%</p>
      </div>
      <div class="rounded-xl border border-border bg-card p-5 shadow-sm">
        <p class="text-sm text-muted-foreground">Traffic</p>
        <p class="text-2xl font-semibold text-foreground mt-1">24.1k</p>
      </div>
    </div>
  </div>
</section>

<!-- Settings section with form fields -->
<section class="py-12 lg:py-20">
  <div class="mx-auto w-full max-w-screen-md px-4 sm:px-6 lg:px-8">
    <h2 class="text-xl font-semibold text-foreground mb-6">Account Settings</h2>
    <div class="flex flex-col gap-4">
      <!-- Stack of form fields -->
    </div>
  </div>
</section>

<!-- Alternate background section for landing pages -->
<section class="py-12 lg:py-20 bg-muted/30">
  <div class="mx-auto w-full max-w-screen-xl px-4 sm:px-6 lg:px-8">
    <h2 class="text-xl font-semibold text-foreground mb-6 text-center">Features</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- feature cards -->
    </div>
  </div>
</section>

React example

import { Container, Grid, Stack, Card } from '@byteion/react';

export function DashboardPage() {
  return (
    <Container size="2xl">
      <section className="py-12 lg:py-20">
        <h2 className="text-xl font-semibold text-foreground mb-6">
          Dashboard Overview
        </h2>
        <Grid smCols={2} lgCols={4} gap={4}>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">Revenue</p>
            <p className="text-2xl font-semibold text-foreground mt-1">$48,290</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">Orders</p>
            <p className="text-2xl font-semibold text-foreground mt-1">1,342</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">Conversion</p>
            <p className="text-2xl font-semibold text-foreground mt-1">3.24%</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">Traffic</p>
            <p className="text-2xl font-semibold text-foreground mt-1">24.1k</p>
          </Card>
        </Grid>
      </section>

      <section className="py-12 lg:py-20">
        <h2 className="text-xl font-semibold text-foreground mb-6">
          Recent Orders
        </h2>
        <Stack gap={4}>
          <!-- order cards -->
        </Stack>
      </section>
    </Container>
  );
}

export function SettingsPage() {
  return (
    <Container size="md">
      <section className="py-12 lg:py-20">
        <h2 className="text-xl font-semibold text-foreground mb-6">
          Profile Settings
        </h2>
        <Stack gap={4}>
          <!-- form fields -->
        </Stack>
      </section>
    </Container>
  );
}

Vue example

<script setup lang="ts">
import { Container, Grid, Stack, Card } from '@byteion/vue';
</script>

<template>
  <Container size="2xl">
    <section class="py-12 lg:py-20">
      <h2 class="text-xl font-semibold text-foreground mb-6">
        Dashboard Overview
      </h2>
      <Grid :smCols="2" :lgCols="4" :gap="4">
        <Card v-for="stat in stats" :key="stat.label" class="p-5">
          <p class="text-sm text-muted-foreground">{{ stat.label }}</p>
          <p class="text-2xl font-semibold text-foreground mt-1">
            {{ stat.value }}
          </p>
        </Card>
      </Grid>
    </section>

    <section class="py-12 lg:py-20">
      <h2 class="text-xl font-semibold text-foreground mb-6">
        Recent Orders
      </h2>
      <Stack :gap="4">
        <!-- order cards -->
      </Stack>
    </section>
  </Container>
</template>

API Reference

Section is a pure HTML element — no component, no props, no JavaScript. It is a semantic <section> tag with responsive vertical padding. The same markup works identically across React, Vue, HTML, Laravel Blade, and any other framework.

Element	Default classes	Purpose
<section>	py-12 lg:py-20	Standalone content region with consistent vertical spacing
<section>	<custom>	Override padding or add background via extra Tailwind classes

Developer tips

Use py-12 lg:py-20 as the default. It provides comfortable breathing room on all screen sizes without feeling sparse.
Combine with alternating background variants. Setting bg-background on odd sections and bg-muted/30 on even sections visually separates content areas without extra borders or dividers.
Use Divider between same-background sections. When two sections share the same background colour, a <hr> or Divider component provides a subtle visual break.
Nest Container inside Section, not the reverse. Container provides page width; Section provides vertical rhythm. The correct order is Container → Section → content.
Keep the same padding value across all sections on a page. Mixing py-8 on one section and py-16 on another creates uneven rhythm.

Common mistakes

Using Section for tiny internal spacing — Section is for page-level vertical rhythm between major content groups. Use padding (p-4, p-6) or Stack for spacing inside cards, forms, and toolbars.
Missing headings for meaningful sections — a section without a heading has no accessible name and appears as an anonymous landmark. Always include an <h2>–<h6> that describes the section's content.
Nesting too many sections — deeply nested sections without clear headings create a confusing document outline for screen reader users. Flatten your layout: one level of sections per page is usually enough.
Mixing inconsistent vertical margins — using py-8 on one section, py-12 on another, and my-16 on a third creates unpredictable gaps. Standardise on one padding value per page.
Adding landmark roles unnecessarily — <section> is already a region landmark when it has an accessible name. Adding role="region" to every section is redundant. Reserve role="main" for the <main> element only.
Using Section only to add a background or border — if the goal is a visual surface, use Card or apply the background to a plain <div>. A section implies semantic structure, not just visual styling.

Production usage tips

Keep page rhythm consistent across dashboard and admin screens. All major content areas should use the same section padding. Consistency builds a predictable user experience.
Test sections on mobile, tablet, and desktop widths. The responsive padding (py-12 lg:py-20) gives more space on large screens and tighter spacing on small screens. Verify the rhythm at 375 px, 768 px, and 1280 px.
Use Container to control width and Section to control vertical rhythm. These two primitives are complementary: Container handles the horizontal axis, Section handles the vertical axis. Do not mix their responsibilities.
Use Grid or Stack inside Section instead of manually spacing every child with margin utilities.
Keep React / Vue examples aligned with canonical HTML. Section is a pure HTML element — the React and Vue versions are identical to the HTML version. There is no custom component to import.
Validate dark mode and branded themes. Section itself uses no colour tokens, but its background variants (bg-background, bg-muted/30) respond to theme changes.
For Laravel / server-rendered apps — use the raw HTML structure shown in the HTML example. Section is a semantic HTML element with zero JavaScript.
For React / Vue SPAs — use plain <section> tags with the same utility classes. No import from @byteion is needed for Section.

Premium examples

Pro patterns available in Byteion Pro:

Dashboard overview section — KPI banner with four stat cards, a sparkline chart panel, and a recent activity table, each sub-area composed with Grid and Card inside a single section
Settings page group — profile, security, notifications, and billing sections stacked vertically, each with a heading and a Card containing form fields arranged with Stack
Ecommerce admin panel section — order summary header with quick stats, a data table of recent orders, and pagination — all wrapped in a single section with consistent padding
ERP workspace section — order entry panel with customer detail, line items, and payment summary, separated into sub-regions within one section
POS management section — compact action tiles grid and a transaction log table in a flush, full-width section
Onboarding step section — multi-step setup wizard where each step is a section with heading, description, form fields, and navigation buttons
Landing-page feature band — alternating background sections: hero, features grid, testimonials carousel, pricing table, and CTA banner, each with distinct visual treatment but the same vertical padding

Container — page-level width and horizontal padding, pairs with Section for full page hierarchy
Grid — two-dimensional layout inside a Section for card grids and multi-column content
Stack — one-dimensional vertical or horizontal flow inside a Section for forms and content rhythm
Card — surface container for grouping related content inside a Section

API Reference

Use the canonical Section HTML classes and data attributes shown in the examples on this page. React and Vue adapters expose the same visual contract through framework-native props and events where the package implements an adapter.

Pair this component with adjacent Byteion primitives from the same workflow: form controls for data entry, feedback components for validation, and layout primitives for spacing.

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

HTML / JS events

No HTML runtime events are declared by this adapter.

React callbacks

No React callback events are declared by this adapter.

Vue emits

No Vue emitted events are declared by this adapter.

Remote / AJAX

This component does not implement Byteion JS remote loading. Use normal HTML form submission, framework state, or your application data layer around it.

Unlock Premium Patterns

Get access to copy-paste ready Pro blocks, SaaS templates, and advanced component patterns.

Explore Pro Components

Section

Overview

Why this exists

Mental model

When to use

When not to use

Basic example

Analytics Overview

Section rhythm

Composition patterns

Anatomy

Usage guidelines

Do and Don't

Do

Don't

Accessibility

Customization

HTML example

React example

Vue example

API Reference

Developer tips

Common mistakes

Production usage tips

Premium examples

Related components

API Reference

Related components

Runtime events

HTML / JS events

React callbacks

Vue emits

Remote / AJAX

Unlock Premium Patterns