Skip to main content
Browse docs

Marwes documentation

Heading

Native-semantic typography family with three heading components backed by one core recipe, one shared typography preset, and a shared React/Vue contract.

What this family solves

Native-semantic typography family with three heading components backed by one core recipe, one shared typography preset, and a shared React/Vue contract.

Use when

  • The UI needs a real page, section, or subsection heading and document outline should stay explicit.
  • The product wants React and Vue heading behavior to stay aligned through one core recipe and one shared contract.
  • Semantic level and visual size may need to diverge intentionally while still keeping the native heading tag.

Avoid when

  • The layout only needs visually larger text and does not benefit from real heading semantics.
  • The surface is really a richer hero, banner, or section-header composition rather than a plain heading component.
  • The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current heading family does not ship.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

H1, H2, H3

Types

H1Props, H2Props, H3Props

Vue — @marwes-ui/vue

Components

H1, H2, H3

Type

HeadingProps

Svelte — @marwes-ui/svelte

Components

H1, H2, H3

Types

H1Props, H2Props, H3Props

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/react"

export function Example() {
  return (
    <>
      <Text variant={TextVariant.display}>Display</Text>

      <H1>Heading 1</H1>
      <H2>Heading 2</H2>
      <H3>Heading 3</H3>

      <Paragraph size="md">Body paragraph text.</Paragraph>
      <Paragraph size="sm">Small body paragraph.</Paragraph>

      <Text variant={TextVariant.label}>Label default</Text>
      <Text variant={TextVariant.labelSmall}>Label small</Text>
      <Text variant={TextVariant.caption}>Caption</Text>
      <Text variant={TextVariant.overline}>Overline</Text>
    </>
  )
}

Vue

<script setup lang="ts">
import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/vue"
</script>

<template>
  <Text :variant="TextVariant.display">Display</Text>

  <H1>Heading 1</H1>
  <H2>Heading 2</H2>
  <H3>Heading 3</H3>

  <Paragraph size="md">Body paragraph text.</Paragraph>
  <Paragraph size="sm">Small body paragraph.</Paragraph>

  <Text :variant="TextVariant.label">Label default</Text>
  <Text :variant="TextVariant.labelSmall">Label small</Text>
  <Text :variant="TextVariant.caption">Caption</Text>
  <Text :variant="TextVariant.overline">Overline</Text>
</template>

Svelte

<script lang="ts">
  import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/svelte"
</script>

<Text variant={TextVariant.display}>Display</Text>

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>

<Paragraph size="md">Body paragraph text.</Paragraph>
<Paragraph size="sm">Small body paragraph.</Paragraph>

<Text variant={TextVariant.label}>Label default</Text>
<Text variant={TextVariant.labelSmall}>Label small</Text>
<Text variant={TextVariant.caption}>Caption</Text>
<Text variant={TextVariant.overline}>Overline</Text>

Accessibility requirements

  • Sequential heading levels: Keep heading levels sequential in the real document outline; use size only to change visual weight.
  • Heading navigation review: Verify screen-reader users can navigate the page by heading level alone.
  • Manual review boundary: Product-level judgment about choosing the correct heading level for the real document outline.
  • Manual review 2: Whether size overrides are used sparingly and do not flatten the content hierarchy.
  • Manual review 3: Whether heading ids and anchor-link patterns stay useful and consistent in real documentation or product flows.

Theming

Heading uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources