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>
  <Heading as="h1" size="4xl" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h2" size="3xl" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h2" size="2xl" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h3" size="xl" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h3" size="lg" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h4" size="md" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h5" size="sm" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>

  <Heading as="h6" size="xs" isTruncated>
    ギャルのパンティーおくれーーーっ！！！！！
  </Heading>
</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