Section

Split content into multiple easily scannable sections.

Import#

  • Section: The container component that manages composition.
  • SectionContainer: The bare container component.
  • SectionHeader: The header component with title and description.
  • SectionBody: The section content.
import {
  Section,
  SectionContainer,
  SectionHeader,
  SectionBody,
} from '@saas-ui/pro'

Usage#

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

Basic section#

<Section title="Section" description="This is a basic section" />

Annotated variant#

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

<Section
  title="Section"
  description="This is a basic section."
  variant="annotated"
>
  <Card>
    <CardBody>
      <Form>
        <FormLayout>
          <Field name="title" label="Title" />
          <Field name="description" label="Description" type="textarea" />
        </FormLayout>
      </Form>
    </CardBody>
  </Card>
</Section>

Multiple sections with divider#

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

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

Composed#

<SectionContainer>
  <SectionHeading mb={4}>
    <SectionTitle>Composed section</SectionTitle>
    <SectionDescription>
      Sections can be fully composed to give you full control.
    </SectionDescription>
  </SectionHeading>
  <SectionBody>Section body</SectionBody>
</SectionContainer>

Props#

The Section component and all sub components accept all Box properties.

Section Props#

description

Type
ReactNode

isAnnotated

Type
boolean

isLoading

Type
boolean

title

Type
ReactNode

Was this helpful?