Heading

Heading is a component that represents section headings. By default, it renders an h1 element.

Import

import { Heading } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Heading>ギャルのパンティーおくれーーーっ！！！！！</Heading>

Copied!

Change the size

Editable example

<VStack>
  <For
    each={[
      { as: "h1", size: "4xl" },
      { as: "h2", size: "3xl" },
      { as: "h2", size: "2xl" },
      { as: "h3", size: "xl" },
      { as: "h3", size: "lg" },
      { as: "h4", size: "md" },
      { as: "h5", size: "sm" },
      { as: "h6", size: "xs" },
    ]}
  >
    {({ as, size }, index) => (
      <Heading key={index} as={as} size={size} isTruncated>
        ギャルのパンティーおくれーーーっ！！！！！
      </Heading>
    )}
  </For>
</VStack>

Copied!

Add a gradient

Editable example

<Heading
  w="full"
  size="2xl"
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
  isTruncated
>
  クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>

Copied!

Edit this page on GitHub

PreviousText NextBlockquote