Skip to content
flood.md
v0.2.10

Heading

Semantic heading levels with an independent visual scale.

Preview

Room for ideas.

Use Heading

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

First time here? Connect Flood
Example import style
heading.tsxTSX
"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Stack gap="4">
        <Heading level={2} size="page">Workspace settings</Heading>
        <Heading level={3} size="section">Notifications</Heading>
      </Stack>
    </FloodRoot>
  );
}

Design notes

  • Choose level for document structure and size for appearance.
  • Display is a large marketing role. Keep page and section sizes for ordinary product interfaces.

API reference

PropValuesDefault
level1 | 2 | 3 | 4 | 5 | 62
size"display" | "large" | "page" | "section""page"
Native HTML propsHTMLAttributes<HTMLHeadingElement>Forwarded
View TypeScript source
Page MarkdownAgent skill