grassroot
Install

Docs Components Primitives

Heading

React example follows below.
ts
const headingFixture = {
  id: "heading",
  text: "Software you can stop worrying about.",
  level: 2,
} satisfies { id: string; text: string; level: 1 | 2 | 3 | 4 };
 
import { Heading } from "@grassroot/ui-react";
 
export default function HeadingDemo() {
  return (
    <div>
      <Heading level={headingFixture.level}>{headingFixture.text}</Heading>
    </div>
  );
}
ts
<script setup lang="ts">
import { Heading } from "@grassroot/ui-vue";
const headingFixture = {
  id: "heading",
  text: "Software you can stop worrying about.",
  level: 2,
} satisfies { id: string; text: string; level: 1 | 2 | 3 | 4 };
 
</script>
 
<template>
  <div>
    <Heading :level="headingFixture.level">{{ headingFixture.text }}</Heading>
  </div>
</template>
ts
import { Component } from "@angular/core";
import { GrassrootHeading } from "@grassroot/ui-angular";
const headingFixture = {
  id: "heading",
  text: "Software you can stop worrying about.",
  level: 2,
} satisfies { id: string; text: string; level: 1 | 2 | 3 | 4 };
 
@Component({
  selector: "app-heading-demo",
  standalone: true,
  imports: [GrassrootHeading],
  template: `
    <div>
      <grassroot-heading [level]="fixture.level">{{ fixture.text }}</grassroot-heading>
    </div>
  `,
})
export class HeadingDemoComponent {
  protected readonly fixture = headingFixture;
}
 
export default HeadingDemoComponent;
ts
<script lang="ts">
  import { Heading } from "@grassroot/ui-svelte";
  const headingFixture = {
    id: "heading",
    text: "Software you can stop worrying about.",
    level: 2,
  } satisfies { id: string; text: string; level: 1 | 2 | 3 | 4 };
 
  </script>
 
<div><Heading level={headingFixture.level}>{headingFixture.text}</Heading></div>
ts
/** @jsxImportSource solid-js */
import { Heading } from "@grassroot/ui-solid";
const headingFixture = {
  id: "heading",
  text: "Software you can stop worrying about.",
  level: 2,
} satisfies { id: string; text: string; level: 1 | 2 | 3 | 4 };
 
export default function HeadingDemo() {
  return (
    <div>
      <Heading level={headingFixture.level}>{headingFixture.text}</Heading>
    </div>
  );
}

Installation

API Reference

Import

import { Heading } from "@grassroot/ui-react";

Props

Prop
Type
Default
Requirement
Description
level
2 | 1 | 3 | 4 | undefined
2
optional
Heading level 1–4, also sets the default tag (h1–h4).
as
React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined
—
optional
Override the rendered element without changing the visual size.
emphasis
boolean | undefined
false
optional
Bump to the emphasized weight (M3 Expressive) for the loudest title on a surface.
Prop
level
Type
2 | 1 | 3 | 4 | undefined
Default
2
Requirement
optional
Description
Heading level 1–4, also sets the default tag (h1–h4).
Prop
as
Type
React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined
Default
—
Requirement
optional
Description
Override the rendered element without changing the visual size.
Prop
emphasis
Type
boolean | undefined
Default
false
Requirement
optional
Description
Bump to the emphasized weight (M3 Expressive) for the loudest title on a surface.

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { Heading } from "@grassroot/ui-vue";

Props

Prop
Type
Default
Requirement
level
1 | 2 | 3 | 4 | undefined
2
optional
as
string | undefined
—
optional
emphasis
boolean | undefined
false
optional
Prop
level
Type
1 | 2 | 3 | 4 | undefined
Default
2
Requirement
optional
Prop
as
Type
string | undefined
Default
—
Requirement
optional
Prop
emphasis
Type
boolean | undefined
Default
false
Requirement
optional

Content regions

  • default

Import

import { Component } from "@angular/core";
import { GrassrootHeading } from "@grassroot/ui-angular";

Props

Prop
Type
Default
Requirement
level
1 | 2 | 3 | 4
2
optional
as
"h1" | "h2" | "h3" | "h4" | "div" | "p" | "span" | undefined
undefined
optional
emphasis
boolean
false
optional
Prop
level
Type
1 | 2 | 3 | 4
Default
2
Requirement
optional
Prop
as
Type
"h1" | "h2" | "h3" | "h4" | "div" | "p" | "span" | undefined
Default
undefined
Requirement
optional
Prop
emphasis
Type
boolean
Default
false
Requirement
optional

Content regions

  • default

Import

import { Heading } from "@grassroot/ui-svelte";

Props

Prop
Type
Default
Requirement
level
1 | 2 | 3 | 4
2
optional
as
string
—
optional
emphasis
boolean
false
optional
class
string
—
optional
Prop
level
Type
1 | 2 | 3 | 4
Default
2
Requirement
optional
Prop
as
Type
string
Default
—
Requirement
optional
Prop
emphasis
Type
boolean
Default
false
Requirement
optional
Prop
class
Type
string
Default
—
Requirement
optional

Content regions

  • children

Import

import { Heading } from "@grassroot/ui-solid";

Props

Prop
Type
Default
Requirement
level
1 | 2 | 3 | 4
—
optional
as
string
—
optional
emphasis
boolean
—
optional
className
string
—
optional
Prop
level
Type
1 | 2 | 3 | 4
Default
—
Requirement
optional
Prop
as
Type
string
Default
—
Requirement
optional
Prop
emphasis
Type
boolean
Default
—
Requirement
optional
Prop
className
Type
string
Default
—
Requirement
optional

Content regions

  • children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.