Components

Heading

Structured Headlines That Do More.

The Heading component gives you complete control over semantic, styled titles across your project, whether you’re marking a page title, a content section, or a headline with visual enhancements. Built with accessibility and SEO in mind, it allows you to select heading levels (H1–H6), wrap content with semantic tags, and optionally include visual elements such as icons or inline components.

With its flexible layout and rich formatting options, the Heading component ensures that every section of your content has a clear, optimized, and styled anchor, ready for both humans and search engines.

Proper semantics, Clear hierarchy

  1. Improve SEO and user navigation.
    Choose H1 to H6 based on structure.

  2. Use inline formatting and links.
    Craft headlines visually without code.

  3. Semantic structure supports accessibility.
    Great for users and assistive tech.

More than text, make it visual

  1. Add icons, badges, or labels before and after.
    Perfect for superscript, indicators, or visuals.

  2. Match heading styles to brand design.
    Size, color, spacing, just how you want it.

  3. Use headings standalone or inline.
    Adapt them into any content layout.

Use Cases

The Heading component is essential for content structure, SEO clarity, and visual communication. It helps define document hierarchy while giving content teams the flexibility to present titles with personality.

Use cases include:

  • Page titles and subheadings

  • Section dividers within landing pages or articles

  • Visual labels with accompanying icons

  • Themed or brand-colored headers using component themes

  • Accessible headings with screen reader-friendly markup

  • Anchor-linked sections to improve navigation and UX

By separating semantics (heading level) from styling, Vertex Forge ensures your headings look great and perform even better in terms of SEO and accessibility.

Configuration Options & Features

The Heading component brings structure, accessibility, and visual polish to every section of your site. With semantic flexibility, content slots, and theming support, it’s more than just a title, it’s a core tool for organizing and enriching your content.

Headlines that stand out, rank higher, and read better everywhere.

Type

Choose the semantic HTML heading tag from H1 to H6.

  • H1: Primary page title (only one per page recommended)

  • H2–H6: Use for nested subheadings and content structure

Correct usage helps with search engine indexing and document accessibility.

Before & After

Optional component slots to render additional inline content:

  • Before: Appears directly before the richtext heading content

  • After: Appears directly after the heading

Use these to insert icons, badges, inline SVGs, or styled components like labels or superscripts

Both slots accept nestable, inline-compatible components.

Richtext

The main content field for your heading. Powered by a WYSIWYG editor with formatting options like:

  • Bold, italic, underline

  • Inline links

  • Line breaks and spans

  • Highlighted text or brand emphasis

Headings are often where SEO optimization begins, so make sure your titles are informative, scannable, and visually appealing.

Component Theme

Apply styling options to the Container using Component Theme settings. These allow you to adjust appearance, spacing, and layout behavior visually.

You can also inherit or override theme presets for complete control.