# Section

> A titled block of a page: a header row (title, count, description, actions) and a body.

Source: https://ui.jcsoftdev.com/docs/components/section

A titled block of a page: a header row (title, count, description, actions) and a body.
It never pads the inline edges (the page layout owns the gutter), and sections nest without
stacking: each titled level steps its heading down and its vertical spacing tighter, while a
titleless wrapper takes no level at all. Named by its title when it has one.

Two ways to fill it, which mix: the props (`title`, `count`, `description`, `actions`, with the
children as the body) or the parts `Section.Header`, `Section.Title`, `Section.Count`,
`Section.Description`, `Section.Actions` and `Section.Body`. As soon as a part is a direct
child, the children are rendered as written and the body is wherever you place `Section.Body`.

## Import

```ts
import { Section } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/section`.

## Usage

```tsx
<Section
  title="Guardians"
  description="People who can pick the student up."
  count={3}
>
  <p className="m-0 text-body text-ink-2">Section body.</p>
</Section>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"article" \| "div" \| "section"` | `"section"` |  |
| `title` | `ReactNode` |  |  |
| `count` | `ReactNode` |  | Outlined count next to the title (a record total, say). |
| `description` | `ReactNode` |  |  |
| `actions` | `ReactNode` |  | Slot at the end of the header row; takes the full row under 560px of the section's own width. |
| `titleAs` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` |  | Heading element of the title. Defaults to `h2`, one level deeper per nested section. |
| `divider` | `boolean` | `false` | Hairline above the section. |
| `padded` | `boolean` | `true` | Vertical padding around the body. Defaults to `true`; `false` leaves the body edge to edge. |
| `classNames` | `Partial<Record<SectionPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-section--default)
- [With Actions](/storybook/?path=/story/containers-section--with-actions)
- [Nested](/storybook/?path=/story/containers-section--nested)
- [Without Divider](/storybook/?path=/story/containers-section--without-divider)
- [Unpadded Body](/storybook/?path=/story/containers-section--unpadded-body)
- [Narrow Actions Take The Row](/storybook/?path=/story/containers-section--narrow-actions-take-the-row)
- [As Div Has No Region](/storybook/?path=/story/containers-section--as-div-has-no-region)
- [Composed](/storybook/?path=/story/containers-section--composed)
- [Titleless Wrapper Keeps Heading Level](/storybook/?path=/story/containers-section--titleless-wrapper-keeps-heading-level)

## Source

`packages/ui/src/containers/section/section.tsx`