Heading

Headings are used for rendering headlines.

Heading composes CBox so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

Import#

import { CHeading } from '@chakra-ui/vue';

Usage#

I'm a Heading

Editable Example

<c-heading>I'm a Heading</c-heading>

Changing font size#

To increase the size of the heading, you can use the fontSize or size prop. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

In love with Vue & Nuxt

Editable Example

<c-stack spacing="3">
  <c-heading as="h1" size="2xl">
    In love with Vue & Nuxt
  </c-heading>
  <c-heading as="h2" size="xl">
    In love with Vue & Nuxt
  </c-heading>
  <c-heading as="h3" size="lg">
    In love with Vue & Nuxt
  </c-heading>
  <c-heading as="h4" size="md">
    In love with Vue & Nuxt
  </c-heading>
  <c-heading as="h5" size="sm">
    In love with Vue & Nuxt
  </c-heading>
  <c-heading as="h6" size="xs">
    In love with Vue & Nuxt
  </c-heading>
</c-stack>

Truncate heading#

Pass the isTruncated prop to render an ellipsis when the headings exceeds

Basic text writing, including headings, body text, lists, and more.

Editable Example

<c-heading>
  Basic text writing, including headings, body text, lists, and more.
</c-heading>

Override style#

You can override the size of the Heading component by passing the fontSize prop.

I'm overriding this heading

Editable Example

<c-heading  size="lg" fontSize="50px">
  I'm overriding this heading
</c-heading>

Composition#

Modern online and offline payments for Africa

Paystack helps businesses in Africa get paid by anyone, anywhere in the world

Editable Example

// Example from paystack.com

<c-box max-w="32rem">
  <c-heading mb="4">Modern online and offline payments for Africa</c-heading>
  <c-text font-size="xl">
    Paystack helps businesses in Africa get paid by anyone, anywhere in the
    world
  </c-text>
  <c-button size="lg" variant-color="green" mt="24px">
    Create a free account
  </c-button>
</c-box>

Props#

The CHeading composes the CBox component. So it accepts all Box props along with the related CSS grid props. See Box component for list of props

Name	Values	Default	Description
`size`	`2xl`, `xl` , `lg`, `md`, `sm`, `xs`	`xl`	The size of the heading.
`as`	`h1`, `h2` , `h3`, `h4`, `h5`, `h6`	`h2`	The final tag rendered.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!