Section

Content sections for organizing page layouts with header, description, actions, and content areas. Supports bordered, card, collapsible, and inset (iOS grouped) variants.

Basic

General Settings

Configure your account preferences and personal information.

Section content goes here. Forms, lists, or any other elements.

<div class="section" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">General Settings</h2>
      <p class="section-description">Configure your account preferences and personal information.</p>
    </div>
  </div>
  <div class="section-content">
    <p>Section content goes here. Forms, lists, or any other elements.</p>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full">
  <div class="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
    <div class="flex flex-col gap-2 flex-1 min-w-0">
      <h2 class="text-lg font-semibold leading-tight m-0">General Settings</h2>
      <p class="text-sm leading-relaxed m-0 opacity-60">Configure your account preferences and personal information.</p>
    </div>
  </div>
  <div class="px-6 pb-6">
    <p>Section content goes here. Forms, lists, or any other elements.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

With Actions

Team Members

Manage your team and their permissions.

Alice JohnsonAdmin

Bob SmithEditor

Carol DavisViewer

<div class="section" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">Team Members</h2>
      <p class="section-description">Manage your team and their permissions.</p>
    </div>
    <div class="section-actions">
      <button class="btn btn-sm color-primary">Add Member</button>
    </div>
  </div>
  <div class="section-content">
    <div style="display:flex; flex-direction:column; gap:0.5rem;">
      <div style="display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; border-bottom:1px solid var(--color-base-300);">
        <span>Alice Johnson</span><span class="badge color-success">Admin</span>
      </div>
      <div style="display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; border-bottom:1px solid var(--color-base-300);">
        <span>Bob Smith</span><span class="badge">Editor</span>
      </div>
      <div style="display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0;">
        <span>Carol Davis</span><span class="badge">Viewer</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full">
  <div class="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
    <div class="flex flex-col gap-2 flex-1 min-w-0">
      <h2 class="text-lg font-semibold leading-tight m-0">Team Members</h2>
      <p class="text-sm leading-relaxed m-0 opacity-60">Manage your team and their permissions.</p>
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <button class="btn btn-sm color-primary">Add Member</button>
    </div>
  </div>
  <div class="px-6 pb-6">
    <div class="flex flex-col gap-2">
      <div class="flex justify-between items-center py-2 border-b border-base-300">
        <span>Alice Johnson</span><span class="badge color-success">Admin</span>
      </div>
      <div class="flex justify-between items-center py-2 border-b border-base-300">
        <span>Bob Smith</span><span class="badge">Editor</span>
      </div>
      <div class="flex justify-between items-center py-2">
        <span>Carol Davis</span><span class="badge">Viewer</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

Bordered

Profile

Your public profile information.

Name
John Doe

Email
john@example.com

Role
Developer

Location
New York

<div class="section section-bordered" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">Profile</h2>
      <p class="section-description">Your public profile information.</p>
    </div>
    <div class="section-actions">
      <button class="btn btn-sm btn-ghost">Edit</button>
    </div>
  </div>
  <div class="section-content">
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:0.875rem;">
      <div><span style="opacity:0.5;">Name</span><br>John Doe</div>
      <div><span style="opacity:0.5;">Email</span><br>john@example.com</div>
      <div><span style="opacity:0.5;">Role</span><br>Developer</div>
      <div><span style="opacity:0.5;">Location</span><br>New York</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full border border-base-300 rounded-box bg-base-100" style="margin:0;">
  <div class="flex items-start justify-between gap-4 p-6 border-b border-base-300">
    <div class="flex flex-col gap-2 flex-1 min-w-0">
      <h2 class="text-lg font-semibold leading-tight m-0">Profile</h2>
      <p class="text-sm leading-relaxed m-0 opacity-60">Your public profile information.</p>
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <button class="btn btn-sm btn-ghost">Edit</button>
    </div>
  </div>
  <div class="p-6">
    <div class="grid grid-cols-2 gap-4 text-sm">
      <div><span class="opacity-50">Name</span><br>John Doe</div>
      <div><span class="opacity-50">Email</span><br>john@example.com</div>
      <div><span class="opacity-50">Role</span><br>Developer</div>
      <div><span class="opacity-50">Location</span><br>New York</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

Card Variant

Notifications

Manage how you receive notifications.

Email notifications Push notifications SMS alerts

<div class="section section-card" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">Notifications</h2>
      <p class="section-description">Manage how you receive notifications.</p>
    </div>
  </div>
  <div class="section-content">
    <div style="display:flex; flex-direction:column; gap:0.75rem;">
      <label style="display:flex; justify-content:space-between; align-items:center;">
        <span>Email notifications</span>
        <input type="checkbox" class="toggle" checked>
      </label>
      <label style="display:flex; justify-content:space-between; align-items:center;">
        <span>Push notifications</span>
        <input type="checkbox" class="toggle">
      </label>
      <label style="display:flex; justify-content:space-between; align-items:center;">
        <span>SMS alerts</span>
        <input type="checkbox" class="toggle">
      </label>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full rounded-box bg-base-100 shadow-sm" style="margin:0;">
  <div class="flex items-start justify-between gap-4 p-6 border-b border-base-300">
    <div class="flex flex-col gap-2 flex-1 min-w-0">
      <h2 class="text-lg font-semibold leading-tight m-0">Notifications</h2>
      <p class="text-sm leading-relaxed m-0 opacity-60">Manage how you receive notifications.</p>
    </div>
  </div>
  <div class="p-6">
    <div class="flex flex-col gap-3">
      <label class="flex justify-between items-center">
        <span>Email notifications</span>
        <input type="checkbox" class="toggle" checked>
      </label>
      <label class="flex justify-between items-center">
        <span>Push notifications</span>
        <input type="checkbox" class="toggle">
      </label>
      <label class="flex justify-between items-center">
        <span>SMS alerts</span>
        <input type="checkbox" class="toggle">
      </label>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for layout.
// Toggle inputs work with native HTML.

Compact

Quick Stats

Overview of today.

142 Orders

$8,420 Revenue

23 New Users

<div class="section section-bordered section-compact" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">Quick Stats</h2>
      <p class="section-description">Overview of today.</p>
    </div>
  </div>
  <div class="section-content">
    <div style="display:flex; gap:2rem; font-size:0.875rem;">
      <div><strong>142</strong> Orders</div>
      <div><strong>$8,420</strong> Revenue</div>
      <div><strong>23</strong> New Users</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full border border-base-300 rounded-box bg-base-100" style="margin:0;">
  <div class="flex items-start justify-between gap-4 p-4 border-b border-base-300">
    <div class="flex flex-col gap-1 flex-1 min-w-0">
      <h2 class="text-base font-semibold leading-tight m-0">Quick Stats</h2>
      <p class="text-xs leading-relaxed m-0 opacity-60">Overview of today.</p>
    </div>
  </div>
  <div class="p-4">
    <div class="flex gap-8 text-sm">
      <div><strong>142</strong> Orders</div>
      <div><strong>$8,420</strong> Revenue</div>
      <div><strong>23</strong> New Users</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

Collapsible

Advanced Options

These options are for advanced users. Toggle the section header to show or hide.

<div class="section section-bordered section-collapsible section-expanded" style="margin:0;">
  <div class="section-header">
    <div class="section-header-content">
      <h2 class="section-title">Advanced Options</h2>
    </div>
    <svg class="section-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
  </div>
  <div class="section-body">
    <div class="section-body-inner">
      <div class="section-content" style="padding-top:var(--section-padding);">
        <p>These options are for advanced users. Toggle the section header to show or hide.</p>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full border border-base-300 rounded-box bg-base-100" style="margin:0;">
  <div class="flex items-start justify-between gap-4 p-6 border-b border-base-300 cursor-pointer select-none hover:bg-base-200">
    <div class="flex flex-col gap-2 flex-1 min-w-0">
      <h2 class="text-lg font-semibold leading-tight m-0">Advanced Options</h2>
    </div>
    <svg class="size-5 shrink-0 ml-auto opacity-30 rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
  </div>
  <div class="grid" style="grid-template-rows: 1fr;">
    <div class="overflow-hidden">
      <div class="p-6">
        <p>These options are for advanced users. Toggle the section header to show or hide.</p>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle collapsible section:
document.querySelector('.section-header').addEventListener('click', () => {
  const section = document.querySelector('.section-collapsible');
  section.classList.toggle('section-expanded');
});

Header Only (iOS Group Header)

Favorites

Safari

Messages

Photos

<div style="display:flex; flex-direction:column; gap:0;">
  <div class="section section-header-only" style="margin:0;">
    <div class="section-header">
      <div class="section-header-content">
        <h2 class="section-title">Favorites</h2>
      </div>
    </div>
  </div>
  <div style="display:flex; flex-direction:column; border:1px solid var(--color-base-300); border-radius:var(--radius-box); overflow:hidden;">
    <div style="padding:0.75rem 1rem; border-bottom:1px solid var(--color-base-300); background:var(--color-base-100);">Safari</div>
    <div style="padding:0.75rem 1rem; border-bottom:1px solid var(--color-base-300); background:var(--color-base-100);">Messages</div>
    <div style="padding:0.75rem 1rem; background:var(--color-base-100);">Photos</div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col">
  <div class="flex flex-col w-full mb-0">
    <div class="px-6 pt-6 pb-2">
      <h2 class="text-sm font-medium uppercase tracking-wider m-0 opacity-60">Favorites</h2>
    </div>
  </div>
  <div class="flex flex-col border border-base-300 rounded-box overflow-hidden">
    <div class="px-4 py-3 border-b border-base-300 bg-base-100">Safari</div>
    <div class="px-4 py-3 border-b border-base-300 bg-base-100">Messages</div>
    <div class="px-4 py-3 bg-base-100">Photos</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

Divider Variant

Section One

First section content with a bottom divider.

Section Two

Second section content with a bottom divider.

Section Three

Last section, no divider.

<div style="display:flex; flex-direction:column;">
  <div class="section section-divider" style="margin:0; padding-bottom:1.5rem;">
    <div class="section-header">
      <div class="section-header-content">
        <h2 class="section-title">Section One</h2>
      </div>
    </div>
    <div class="section-content">
      <p>First section content with a bottom divider.</p>
    </div>
  </div>
  <div class="section section-divider" style="margin:1.5rem 0; padding-bottom:1.5rem;">
    <div class="section-header">
      <div class="section-header-content">
        <h2 class="section-title">Section Two</h2>
      </div>
    </div>
    <div class="section-content">
      <p>Second section content with a bottom divider.</p>
    </div>
  </div>
  <div class="section" style="margin:1.5rem 0 0;">
    <div class="section-header">
      <div class="section-header-content">
        <h2 class="section-title">Section Three</h2>
      </div>
    </div>
    <div class="section-content">
      <p>Last section, no divider.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col">
  <div class="flex flex-col w-full pb-6 border-b border-base-300">
    <div class="px-6 pt-6 pb-2">
      <h2 class="text-lg font-semibold m-0">Section One</h2>
    </div>
    <div class="px-6"><p>First section content with a bottom divider.</p></div>
  </div>
  <div class="flex flex-col w-full py-6 border-b border-base-300">
    <div class="px-6 pb-2">
      <h2 class="text-lg font-semibold m-0">Section Two</h2>
    </div>
    <div class="px-6"><p>Second section content with a bottom divider.</p></div>
  </div>
  <div class="flex flex-col w-full pt-6">
    <div class="px-6 pb-2">
      <h2 class="text-lg font-semibold m-0">Section Three</h2>
    </div>
    <div class="px-6"><p>Last section, no divider.</p></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS layout component

Classes Reference

Class	Description
.section	Base section container with vertical margin
.section-header	Header area (flex, space-between)
.section-header-content	Title + description wrapper
.section-title	Section title
.section-description	Description text below title
.section-actions	Action buttons area
.section-content	Main content area
.section-bordered	Border + background
.section-card	Shadow + background (card style)
.section-inset	iOS grouped style (horizontal margin)
.section-compact	Reduced padding and smaller text
.section-collapsible	Clickable header for expand/collapse
.section-expanded	Open state for collapsible
.section-chevron	Chevron icon (rotates when expanded)
.section-body	Collapsible grid wrapper
.section-body-inner	Overflow hidden wrapper
.section-divider	Bottom border between sections
.section-header-only	iOS list group header style
.section-sm	Small size
.section-lg	Large size
.section-disabled	Disabled state
.section.glass	Glassmorphism variant