Section

Split content into multiple easily scannable sections.

Beta
Buy Pro
0.38.0 (latest)

Import

Section: The container component
SectionHeader: The header component with title and description.
SectionBody: The section content.

import { Section, SectionHeader, SectionBody } from '@saas-ui-pro/react'

Usage

Sections can be used to split long content like forms into multiple smaller sections with a title and an optional description.

Basic section

import { AppShell } from '@saas-ui/react'
import { Section, SectionHeader, SectionBody } from '@saas-ui-pro/react'

export default function App() {
  return (
    <AppShell p="8">
      <Section>
        <SectionHeader title="Section" description="This is a basic section." />
        <SectionBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </SectionBody>
      </Section>
    </AppShell>
  )
}

Annotated variant

The annotated variant is typically used together with the Card component to create well structed forms.

import { Card, CardBody } from '@chakra-ui/react'
import { AppShell, Form, FormLayout } from '@saas-ui/react'
import { Section, SectionHeader, SectionBody } from '@saas-ui-pro/react'

export default function App() {
  return (
    <AppShell>
      <Form px="4">
        {({ Field }) => (
          <Section variant="annotated">
            <SectionHeader
              title="Section"
              description="This is a basic section."
            />
            <SectionBody>
              <Card>
                <CardBody>
                  <FormLayout>
                    <Field name="title" label="Title" />
                    <Field
                      name="description"
                      label="Description"
                      type="textarea"
                    />
                  </FormLayout>
                </CardBody>
              </Card>
            </SectionBody>
          </Section>
        )}
      </Form>
    </AppShell>
  )
}

Multiple sections with divider

The annotated variant is typically used together with the Card component to create well structed forms.

import { Card, CardBody } from '@chakra-ui/react'
import { AppShell, Form, FormLayout } from '@saas-ui/react'
import { Section, SectionHeader, SectionBody } from '@saas-ui-pro/react'

export default function App() {
  return (
    <AppShell>
      <Form px="4" defaultValues={{ teams: ['frontend'] }}>
        {({ Field }) => (
          <VStack
            divider={<StackDivider />}
            align="stretch"
            spacing={8}
            pb="16"
          >
            <Section variant="annotated">
              <SectionHeader
                title="Create workspace"
                description="Workspaces contain all assets shared across your team."
              />
              <SectionBody>
                <Card>
                  <CardBody>
                    <FormLayout>
                      <Field name="title" label="Title" />
                      <Field
                        name="description"
                        label="Description"
                        type="textarea"
                      />
                    </FormLayout>
                  </CardBody>
                </Card>
              </SectionBody>
            </Section>
            <Section variant="annotated">
              <SectionHeader
                title="Teams"
                description="Select which teams have access to this workspace."
              />
              <SectionBody>
                <Card>
                  <CardBody>
                    <Form>
                      <FormLayout>
                        <Field
                          name="teams"
                          label="Teams"
                          type="select"
                          multiple
                          options={[
                            { value: 'Frontend' },
                            { value: 'Backend' },
                          ]}
                        />
                      </FormLayout>
                    </Form>
                  </CardBody>
                </Card>
              </SectionBody>
            </Section>
          </VStack>
        )}
      </Form>
    </AppShell>
  )
}

Custom title and description

The section title renders a h3 element by default. You can customize the title and description by passing a custom component to the SectionHeader component, instead of using the title prop.

import { Text } from '@chakra-ui/react'
import { AppShell, Form, FormLayout } from '@saas-ui/react'
import {
  Section,
  SectionHeader,
  SectionTitle,
  SectionDescription,
  SectionBody,
} from '@saas-ui-pro/react'

export default function App() {
  return (
    <Section>
      <SectionHeader mb={4}>
        <SectionTitle as="h2">H2 heading</SectionTitle>
        <SectionDescription fontSize="lg">
          Customize the look and feel of the section title and description.
        </SectionDescription>
      </SectionHeader>
      <SectionBody>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          consectetur, eros quis aliquam ultricies, nunc nisl ultrices ligula,
          quis ultricies nisl nunc quis nunc. Sed euismod, nisl eget ultricies
          aliquam, nisl nisl ultricies nisl, quis ultricies nisl nunc quis nunc.
          Sed euismod, nisl eget ultricies aliquam, nisl nisl ultricies nisl,
          quis ultricies nisl nunc quis nunc.
        </Text>
      </SectionBody>
    </Section>
  )
}

Was this helpful?