Chakra-UI

I♥️Components

Heading

|

Chakra Docs

|

⦾ HTML headings are used to define the structure and hierarchy of the content within a web page. They provide a way to organize and categorize different sections of the content. HTML offers six levels of headings, from <h1> to <h6>, representing the highest level of importance to the lowest.

The choice of heading level depends on the content's structure and hierarchy. It's important to use headings in a logical and meaningful way to improve accessibility and search engine optimization (SEO). Search engines and screen readers rely on headings to understand the page's structure and content organization.

The Chakra UI Heading component is a versatile component used to render semantic HTML heading elements.

  • <h1>: This is the highest level heading and is typically used for the main title or heading of a page. It should be used only once per page and represents the most important heading.
  • <h2>: The second-level heading is used for section titles or major headings within the page. It represents a slightly lower level of importance compared to <h1>.
  • <h3> to <h6>: These are lower-level headings that are used for sub-sections, subheadings, and nested content within the page. The importance decreases from <h3> to <h6>, with <h6> being the least important.

The Heading component can be imported as follows:

Examples

Basic Usage

⦾ The Heading component is composed of the Box component, allowing you to utilize all the style props and responsive styles as well. By default, it renders an <h2> tag.

This is the as basic as a heading gets.

Code

Customizing Size

⦾ You can easily adjust the visual size of the heading using the size prop. This prop ensures that the heading size automatically adjusts for smaller screens. The available sizes are 4xl, 3xl, 2xl, xl, lg, md, sm, and xs.

4xl as h1

3xl as h2

2xl as h2

xl as h3

lg as h4

md as h5
sm as h6
xs as h6

Code

Heading Truncation

⦾ If you want to truncate the heading after a specific number of lines, you can use the noOfLines prop. This will render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

This overly long heading will be truncated after one line.

Code

Overriding Default Styles

⦾ You can easily override the size of the Heading component by using the fontSize prop. This eliminates the need to write custom CSS or use the styled() function.

Style override has been applied.

Code

Complex Layouts

⦾ The Heading component can be composed with other Chakra UI components to create more complex layouts.

In this example, we have a Box component that serves as a container for our composition. Within the Box, we have a Heading component (<Heading as="h1">) with a size of xl, representing a larger heading. It introduces the main topic.

The text sections below the heading offer additional information, followed by a button to lead users to more information. This is a simple and attractive layout achieved with just a few lines of code.

Welcome to the World of Coding

Discover the endless possibilities of coding and unlock your potential to create amazing applications.

Whether you're a beginner or an experienced developer, we have resources and tutorials to help you level up your skills.

Code

Did you know?

Creative Idea No. 1

Heading with Decorative Icon:With Chakra UI, you can easily incorporate an icon from popular icon libraries, to create visually appealing headings. This can help attract attention to a topic and visually enhance its meaning.

You're a Gem

Code

Creative Idea No. 2

Animated Heading: below is an example that demonstrates the usage of the Heading component in a colorful, playful, and dynamic manner that bounces and rotates when the user hovers over it. The component utilizes Chakra UI's motion component, along with Framer Motion library, to create the dynamic animation. The code structure consists of wrapping the Heading component with the motion function and applying animation properties like whileHover and transition. The result is an engaging and eye-catching heading that adds excitement and energy to the user experience.

Welcome to the Fun Zone!

Code

Creative Idea No. 3

Typewriter Heading: This example showcases a fun and attention-grabbing animation for the header, which plays as soon as the page loads. This could be used to introduce a new product or feature, or to simply add some excitement to the user experience.

Inquire about our special offers today!

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.