Skip to content

← All components

Foundation and layout

Heading

Responsive heading hierarchy from h1 through h6.

Live example

Content comes first.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Heading } from "@cofob/design-system-react";

/**
 * Complete Heading parameter reference.
 * @param level/as
 *   type: 1–6 | "h1"–"h6" (Svelte/HTML)
 *   default: 2 / "h2"
 *   example: 2 / "h2"
 * @param size
 *   type: "sm" | "md" | "lg" | "xl" | "2xl"
 *   default: semantic default for level
 *   example: "md"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function HeadingExample() {
  return (
    <Heading>Content</Heading>
  );
}

Svelte

svelte
<script lang="ts">
  import { Heading } from "@cofob/design-system-svelte";

  // Complete Heading parameter reference.
  // level/as
  //   type: 1–6 | "h1"–"h6" (Svelte/HTML)
  //   default: 2 / "h2"
  //   example: 2 / "h2"
  // size
  //   type: "sm" | "md" | "lg" | "xl" | "2xl"
  //   default: semantic default for level
  //   example: "md"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Heading as="h2">Title</Heading>

HTML

html
<!--
  Complete Heading parameter reference.
  level/as
    type: 1–6 | "h1"–"h6" (Svelte/HTML)
    default: 2 / "h2"
    example: 2 / "h2"
  size
    type: "sm" | "md" | "lg" | "xl" | "2xl"
    default: semantic default for level
    example: "md"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<h2 class="cf-heading" data-level="2">Title</h2>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
level/as1–6 | "h1"–"h6" (Svelte/HTML)2 / "h2"React · Svelte · HTML2 / "h2"Chooses the semantic heading element independently from its visual size.
size"sm" | "md" | "lg" | "xl" | "2xl"semantic default for levelReact · Svelte · HTML"md"Applies a design-system size token.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.