Content Header — Editor Guide

This page shows how the Content Header works in Etch. Each example below is a live block you can click, inspect in the right-hand panel, and edit.

The component replaces hand-built heading stacks. You choose plain-language options — title style, optional sub-heading, body text, and buttons — and the site handles the structure behind the scenes.

• One block per page section (hero, intro, call-to-action, etc.)
• Friendly labels in the panel — no HTML or class names required
• Optional regions you can turn on or off as the design needs

1. Title and sub-heading — how search engines read your page

Every page needs a clear main message. Search engines look for structured headings to understand what the page is about. The Content Header separates two ideas that are easy to mix up:

The Title is the official heading for this block. You pick its importance level — Page Title (main page topic), Section Title (a major section), or Card Title (a smaller block). That choice matters for SEO even when the title doesn't look like the biggest line on screen.

The Sub-heading is an optional second line. It can be styled to look like the large headline visitors see first — while the title line acts as a short label or category above it.

• Eyebrow or Pill title + large sub-heading = label on top, main message below (common hero pattern)
• Use Page Title level once per page for the primary topic; use Section Title for each major section
• If the title already looks like the main headline (Page Title visual style), you often don't need a sub-heading

Try it: Select the block below → Header → change Sub-heading Size to Page Title, Section Title, or Card Title and watch the visual hierarchy shift without changing the SEO level of the title.

2. Title visual style — same words, different look

Title Visual Style controls appearance only — not the SEO level you chose above. One block can look like an eyebrow label, a pill badge, a page-sized headline, or a section title.

This example uses Section Title styling. You don't need a separate block for every look.

Try it: Select the block → Header → Title Visual Style → try Eyebrow, Pill, Page Title, Section Title, or Card Title. The SEO H-level Tag stays the same unless you change it separately.

3. Turn sections on or off

Not every header needs body copy or buttons. Three toggles in the panel control what appears:

Add Sub-heading (inside Header settings), Add Body Text, and Add Button(s). Turn them off for a minimal title-only band — useful for simple section dividers or when content lives in blocks below.

Try it: Toggle Add Body Text or Add Button(s) off on this block, or turn them back on. For a header-only look, disable both — similar to example 4 below.

4. Header only

When you only need a title — no supporting copy or calls to action — leave body text and buttons off. The block stays lightweight and the content below carries the detail.

5. Layout — alignment, spacing, and color mode

The Layout group controls how the whole header sits on the page. Center All Content is ideal for hero-style bands. Region Spacing adjusts vertical breathing room between the title, body, and buttons.

Color Mode switches text colors for light or dark section backgrounds. Use Dark when the section behind the header uses a dark background color.

Try it: Change Center All Content, Region Spacing (Normal / Tight / Spacious), or Color Mode on this block and on the dark live example in section 7.

7. Content Header inside cards

Use Card Title (H3) for headings inside grid cards, feature tiles, and linked panels. The component scales down cleanly — tight spacing keeps card interiors compact.

Top row: cards with calls to action. Bottom row: informational cards with no buttons — title and body only.

Try it: Select any card → set SEO H-level Tag to Card Title (h3) and Title Visual Style to Card Title. Toggle Add Button(s) off for info-only cards.