Docs
Page Section

Page Section

A compound component for organizing page content into distinct sections.

Loading...
import {
  PageSection,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
  PageSectionDescription,
  PageSectionAside,
  PageSectionContent,
} from 'ui-patterns/PageSection'
import { Button, Card, CardContent } from 'ui'
 
export function PageSectionDemo() {
  return (
    <div className="w-full">
      <PageSection>
        <PageSectionMeta>
          <PageSectionSummary>
            <PageSectionTitle>Section Title</PageSectionTitle>
            <PageSectionDescription>
              This is a section with a title and description, plus optional actions.
            </PageSectionDescription>
          </PageSectionSummary>
          <PageSectionAside>
            <Button type="default" size="small">
              Action
            </Button>
          </PageSectionAside>
        </PageSectionMeta>
        <PageSectionContent>
          <Card>
            <CardContent className="p-6">
              <p className="text-sm text-foreground-light">
                Section content goes here. This could be forms, tables, or any other content.
              </p>
            </CardContent>
          </Card>
        </PageSectionContent>
      </PageSection>
    </div>
  )
}

Sub-components

  • PageSection - Root container with orientation variants (horizontal or vertical)
  • PageSectionMeta - Meta wrapper for summary and aside (groups summary and aside together)
  • PageSectionSummary - Container for section title and description (should be inside PageSectionMeta, has flex-1)
  • PageSectionTitle - Section heading (h2)
  • PageSectionDescription - Supporting text below section title
  • PageSectionAside - Container for section-level actions (should be inside PageSectionMeta, has shrink-0)
  • PageSectionContent - Container for the main section content

Orientation Variants

  • vertical - Content stacks vertically (default)
  • horizontal - Summary and content arranged horizontally on larger screens

Examples

Horizontal Orientation

Loading...
import {
  PageSection,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
  PageSectionDescription,
  PageSectionContent,
} from 'ui-patterns/PageSection'
import { Card, CardContent } from 'ui'
 
export function PageSectionHorizontal() {
  return (
    <div className="w-full">
      <PageSection orientation="horizontal">
        <PageSectionMeta>
          <PageSectionSummary>
            <PageSectionTitle>Section Title</PageSectionTitle>
            <PageSectionDescription>
              In horizontal orientation, the summary (title and description) appears on the left,
              with content arranged on the right on larger screens. This is useful for detailed
              sections where you want to maintain context while viewing content.
            </PageSectionDescription>
          </PageSectionSummary>
        </PageSectionMeta>
        <PageSectionContent>
          <Card>
            <CardContent className="p-6">
              <p className="text-sm text-foreground-light">
                The content area appears alongside the summary in a horizontal layout. On smaller
                screens, it will stack vertically.
              </p>
            </CardContent>
          </Card>
        </PageSectionContent>
      </PageSection>
    </div>
  )
}

With Aside Actions

Loading...
import {
  PageSection,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
  PageSectionDescription,
  PageSectionAside,
  PageSectionContent,
} from 'ui-patterns/PageSection'
import { Button, Card, CardContent } from 'ui'
 
export function PageSectionWithAside() {
  return (
    <div className="w-full">
      <PageSection>
        <PageSectionMeta>
          <PageSectionSummary>
            <PageSectionTitle>Section Title</PageSectionTitle>
            <PageSectionDescription>
              This demonstrates PageSection with actions in the Aside component.
            </PageSectionDescription>
          </PageSectionSummary>
          <PageSectionAside>
            <Button type="default" size="small">
              Secondary
            </Button>
            <Button type="primary" size="small">
              Primary Action
            </Button>
          </PageSectionAside>
        </PageSectionMeta>
        <PageSectionContent>
          <Card>
            <CardContent className="p-6">
              <p className="text-sm text-foreground-light">
                The Aside component positions actions horizontally aligned with the section summary,
                providing a clear separation between description and actions.
              </p>
            </CardContent>
          </Card>
        </PageSectionContent>
      </PageSection>
    </div>
  )
}
PreviousPage Header
NextText Confirm Dialog