Components / Heading

Heading

# Introduction

Use <zinq:heading> to create a heading element. The heading element is used to define the structure of the document.

# Usage

By default, the <zinq:heading> component will render as <div> tag, unless you specify the level attribute.

Edit profile
Update your profile information.
  
<zinq:heading>Edit profile</zinq:heading>
<zinq:subheading>Update your profile information.</zinq:subheading>

# Levels

There are four levels of headings, from <zinq:heading level="1"> to <zinq:heading level="4"> . The level attribute is used to define the level of the heading.

Edit profile

Update your profile information.

Edit profile

Update your profile information.

Edit profile

Update your profile information.

Edit profile

Update your profile information.
  
<div class="space-y-6">
    <div>
        <zinq:heading level="1">Edit profile</zinq:heading>
        <zinq:subheading>Update your profile information.</zinq:subheading>
    </div>
    <div>
        <zinq:heading level="2">Edit profile</zinq:heading>
        <zinq:subheading>Update your profile information.</zinq:subheading>
    </div>
    <div>
        <zinq:heading level="3">Edit profile</zinq:heading>
        <zinq:subheading>Update your profile information.</zinq:subheading>
    </div>
    <div>
        <zinq:heading level="4">Edit profile</zinq:heading>
        <zinq:subheading>Update your profile information.</zinq:subheading>
    </div>
</div>