Section

Use Section

Section is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Section, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Section title="Project settings" description="Manage details your team shares." headingLevel={2}>
        <Text as="p">Section content.</Text>
      </Section>
    </FloodRoot>
  );
}

Design notes

• Section renders a native section and heading. A generated heading ID labels the region; explicit id creates a deterministic heading ID. headingLevel follows the host document hierarchy.
• The title and description share a close text column; actions align separately and wrap when necessary. It adds no surface or border. Compose Surface or another container inside when content needs its own background.
• Original compatible addition in the unpublished 0.2.5 source candidate.
• headingLevel chooses h2–h6 for the document outline; it does not set the visual scale. headingSize independently selects the existing Heading typography role (section by default).

API reference