Skip to main content

Section

Section

Content section container for page organization

Tags: component layout container

View Demo

Section provides a styled container for organizing page-level content with optional title and description.

Import​

<script>
  import { Section } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Section>
  <p>Your content here</p>
</Section>

Props​

Prop Type Default Description
title string - Section title (h2)
description string - Description text
class string - Additional classes
children Snippet required Section content

With Title​

<Section title="Account Settings">
  <form>
    <!-- Settings form -->
  </form>
</Section>

With Description​

<Section title="Notifications" description="Configure how you receive notifications and alerts.">
  <div class="space-y-4">
    <Switch label="Email notifications" />
    <Switch label="Push notifications" />
    <Switch label="SMS alerts" />
  </div>
</Section>

Multiple Sections​

<div class="space-y-6">
  <Section title="Profile">
    <form class="space-y-4">
      <Input label="Display Name" />
      <Textarea label="Bio" />
    </form>
  </Section>

  <Section title="Security">
    <div class="space-y-4">
      <Button variant="outline">Change Password</Button>
      <Button variant="outline">Enable 2FA</Button>
    </div>
  </Section>

  <Section title="Danger Zone" class="border-destructive">
    <p class="text-muted-foreground mb-4">Once you delete your account, there is no going back.</p>
    <Button variant="destructive">Delete Account</Button>
  </Section>
</div>

Custom Styling​

<Section title="Featured" class="bg-primary/5 border-primary">
  <p>Highlighted content</p>
</Section>

Section vs Card​

Use Section for page-level organization:

  • Settings pages with multiple groups
  • Form sections
  • Content areas within a page

Use Card for individual content items:

  • Dashboard widgets
  • List items
  • Standalone content panels
<!-- Page with sections -->
<div class="space-y-6">
  <Section title="Overview">
    <div class="grid grid-cols-3 gap-4">
      <Card>Stat 1</Card>
      <Card>Stat 2</Card>
      <Card>Stat 3</Card>
    </div>
  </Section>

  <Section title="Recent Activity">
    <div class="space-y-2">
      <Card>Activity 1</Card>
      <Card>Activity 2</Card>
    </div>
  </Section>
</div>

Examples​

Settings Page​

<div class="max-w-2xl mx-auto space-y-6">
  <Section title="Personal Information" description="Update your personal details.">
    <form class="space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <Input label="First Name" value="John" />
        <Input label="Last Name" value="Doe" />
      </div>
      <Input label="Email" type="email" value="john@example.com" />
      <Input label="Phone" type="tel" />
      <Button>Save Changes</Button>
    </form>
  </Section>

  <Section title="Password" description="Update your password regularly for security.">
    <form class="space-y-4">
      <Input label="Current Password" type="password" />
      <Input label="New Password" type="password" />
      <Input label="Confirm Password" type="password" />
      <Button>Update Password</Button>
    </form>
  </Section>

  <Section title="Preferences">
    <div class="space-y-4">
      <Select label="Language">
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="fr">French</option>
      </Select>
      <Select label="Timezone">
        <option value="utc">UTC</option>
        <option value="est">Eastern Time</option>
        <option value="pst">Pacific Time</option>
      </Select>
    </div>
  </Section>
</div>

Dashboard Sections​

<div class="space-y-6">
  <Section title="Quick Actions">
    <div class="flex gap-4">
      <Button>New Project</Button>
      <Button variant="outline">Import Data</Button>
      <Button variant="outline">Generate Report</Button>
    </div>
  </Section>

  <Section title="Recent Projects" description="Your most recently accessed projects.">
    <DataTable data={recentProjects} columns={projectColumns} />
  </Section>

  <Section title="Team Activity">
    <div class="space-y-3">
      {#each activities as activity}
        <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
          <Avatar size="sm">{activity.user.initials}</Avatar>
          <div>
            <p class="text-sm font-medium">{activity.user.name}</p>
            <p class="text-xs text-muted-foreground">{activity.action}</p>
          </div>
          <span class="ml-auto text-xs text-muted-foreground">
            {activity.time}
          </span>
        </div>
      {/each}
    </div>
  </Section>
</div>

Styling​

Section includes:

  • Card background color
  • Rounded corners
  • Shadow
  • Border
  • Padding (p-6)

Accessibility​

  • Title renders as h2 for proper heading hierarchy
  • Semantic section element
  • Description provides context
On this page