Section

Page section surface with an optional heading and subtitle above a slotted body.

Use when you need to label a major region of a page with an accessible level-2 heading and optional subtitle above its content. <r-section> provides the header row and body surface.

Quick Start

Basic Usage

Body content goes in the default slot.

<r-section heading="Section heading" subtitle="A short line describing this section.">
  <p>Body content goes in the default slot.</p>
</r-section>

API Reference

Properties

Property	Type	Default	Description
`heading`	`string`	`''`	Section heading, rendered as an ARIA level-2 heading
`subtitle`	`string`	`''`	Supporting line below the heading
`sheet`	`string`	`''`	CSS injected into the section's shadow DOM

The header row (heading + subtitle) is hidden entirely when both heading and subtitle are empty.

Heading `heading`

The section heading, rendered as an ARIA level-2 heading (role="heading", aria-level="2"). Hidden when empty.

Body content.

<r-section heading="Only a heading">
  <p>Body content.</p>
</r-section>

Subtitle `subtitle`

A supporting line below the heading. Hidden when empty.

Body content.

<r-section heading="Heading" subtitle="Supporting subtitle text.">
  <p>Body content.</p>
</r-section>

Shadow CSS `sheet`

CSS injected into the section's shadow DOM, the same sheet convention used by every other ranui component.

Body content.

<r-section heading="Themed section" sheet=".ran-section-heading { color: #006bff; }">
  <p>Body content.</p>
</r-section>

Slots

Slot	Description
(default)	Body content, rendered below the header row.

CSS Parts

Part	Description
`header`	The header row wrapping heading + subtitle
`heading`	The ARIA level-2 heading element
`subtitle`	The supporting subtitle line
`body`	The body wrapper around the default slot

CSS variables exposed: --ran-section-border-color, --ran-section-radius, --ran-section-background, --ran-section-shadow, --ran-section-padding, --ran-section-heading-color, --ran-section-heading-font-size, --ran-section-heading-font-weight, --ran-section-subtitle-color.

r-section {
  --ran-section-background: var(--surface-1);
  --ran-section-padding: 32px;
  --ran-section-heading-color: var(--text-strong);
}
r-section::part(subtitle) {
  max-width: 48ch;
}

Best Practices

Section titles: Set heading to label each major region of a page.
Context: Use subtitle for a short supporting line; omit both to render a plain surface with no header row.
Accessibility: The heading is exposed as an ARIA level-2 heading, so it participates in the document outline; keep headings meaningful.
Theming: Prefer the --ran-section-* CSS variables or ::part() selectors over the sheet attribute for reusable styling.