---
title: "UIKit heading component"
date: "2020-11-18T16:04:34+00:00"
summary: "Discover UIKit's versatile heading component for Drupal. Customize elements, styles, and layouts easily. Learn key features and form fields to create impactful, accessible headings for your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-heading-component"
id: "6811385c-d058-4261-abc5-16476cc0fe65"
---

The heading component provides a configurable heading element. 

**Key information about this component:** 

**Layout canvas elements**
--------------------------

*   **Use page title -** Toggling this **ON** will hide the **Heading** field and use the page title as the heading text.
*   **Heading -** Provides the heading element. The **Style tab** includes **Modifiers** to apply color themes and align the heading text. 

Component form fields
---------------------

*   **Heading -** Text for the heading. This field is required.
*   **Heading element -** Sets the heading type from H1 to H6. You can also select **Span** if you require text to look like a heading but not use a heading element.
*   **Heading size override -** Overrides the style of the heading with the style of a different heading element. For example, you can make a Heading 3 element look like a Heading 2 element.
*   **Align heading text -** Sets the alignment of the heading text.
*   **Heading color -** Sets the heading color theme.
*   **Add space below -** Adds additional space below the heading.