Heading

Import

import { Heading } from "@typed/ui/Heading";

Signatures

export declare function Heading<const Options extends HeadingOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, HeadingInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Examples

import { html } from "@typed/template";
import { Heading } from "@typed/ui/Heading";

export function AccountSection(level: 2 | 3) {
  return html`<section aria-labelledby="account-section-title">
    ${Heading({
      level,
      content: "Account security",
      props: { id: "account-section-title", class: "section-title" },
    })}
    <p>Review the devices and credentials that can access this account.</p>
  </section>`;
}

export const AccountPage = html`<main>
    <h1>Account settings</h1>
    ${AccountSection(2)}
  </main>`;

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

• Heading.Heading from @typed/ui
• Heading.Heading from @typed/ui/index

Source

• packages/ui/src/Heading.ts:74