Section

import { Section } from 'cx/widgets';

Sections are used to divide a larger body into distinct parts. A section optionally may have a header (title) and a footer.

Note

Section predates Tailwind CSS and is rarely used when Tailwind is available. Consider using Tailwind’s card utilities instead.

 <div className="flex flex-col gap-4">
  <Section mod="card" title="Simple Section">
    This is a simple section with a title and some content.
  </Section>

  <Section mod="card" title="Section with Footer">
    This section has a footer with action buttons.
    <FlexRow putInto="footer" spacing>
      <Button mod="hollow" icon="calendar" />
      <Button mod="hollow" icon="calculator" />
      <Button mod="hollow" icon="search" />
    </FlexRow>
  </Section>

  <Section mod="card">
    <FlexRow align="center" putInto="header">
      <Heading level={4} className="text-blue-400">
        Custom Header
      </Heading>
      <Button mod="hollow" icon="x" style="margin-left: auto" />
    </FlexRow>
    This section has a custom header with a close button.
  </Section>
</div> 

Simple Section

This is a simple section with a title and some content.

Section with Footer

This section has a footer with action buttons.

Custom Header

This section has a custom header with a close button.

Mods

 <div className="grid grid-cols-2 gap-4">
  <Section mod="primary" title="mod=primary">
    Primary style with blue background.
  </Section>

  <Section mod="success" title="mod=success">
    Success style with green background.
  </Section>

  <Section mod="warning" title="mod=warning">
    Warning style with orange background.
  </Section>

  <Section mod="error" title="mod=error">
    Error style with red background.
  </Section>
</div> 

mod=primary

Primary style with blue background.

mod=success

Success style with green background.

mod=warning

Warning style with orange background.

mod=error

Error style with red background.

Configuration

Property	Type	Description
`title`	`string`	Section’s title text.
`header`	`config`	Custom content for the header. Use `putInto="header"` on child elements.
`footer`	`config`	Custom content for the footer. Use `putInto="footer"` on child elements.
`pad`	`boolean`	Add default padding to the section body. Default is `true`.
`mod`	`string`	Visual modifier. Values: `card`, `primary`, `success`, `warning`, `error`.
`hLevel`	`number`	Heading level for the title. Default is `3`.
`headerStyle`	`string \| object`	Custom style for the header.
`headerClass`	`string \| object`	Additional CSS class for the header.
`bodyStyle`	`string \| object`	Custom style for the body.
`bodyClass`	`string \| object`	Additional CSS class for the body.
`footerStyle`	`string \| object`	Custom style for the footer.
`footerClass`	`string \| object`	Additional CSS class for the footer.
`baseClass`	`string`	Base CSS class. Default is `section`.