Fylgja Heading Group

A heading group pairs a heading with a short eyebrow above it, a subtitle below it, or both. It is built on the native <hgroup>, which keeps the extra lines tied to the heading without adding them to the page outline.

Preview

<hgroup>
	<p>Release notes</p>
	<h2>Fylgja 3.0 is here</h2>
	<p>Smaller, faster, and built on native CSS features.</p>
</hgroup>

hgroup {
	> p:has(+ :is(h1, h2, h3, h4, h5, h6)) {
		margin-block-end: 0.5em;
		color: color-mix(in oklab, var(--brand) 60%, var(--root-fg));
		font-size: 0.875em;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	> :is(h1, h2, h3, h4, h5, h6) ~ p {
		margin-block-start: 0.5em;
		color: color-mix(in oklab, var(--root-fg) 70%, var(--root-bg));
		font-size: var(--lead-size, large);
	}
}

Usage

• Wrap one heading and its paragraphs in an <hgroup>. Base already removes the margins between them.
• A <p> before the heading becomes the eyebrow, a small uppercase line in the brand color.
• A <p> after the heading becomes the subtitle, in a larger and muted text.
• The CSS selects the parts by their position, so the markup stays classless.

Anatomy

Accessibility

• Only the heading appears in the outline and in a screen reader’s list of headings. The paragraphs are read as normal text.
• Screen readers read the hgroup in source order, so the eyebrow is announced before the heading. Keep it short, so it does not delay the heading.
• Pick the heading level for its place in the page, not for its size.

Variants

Subtitle only

<hgroup>
	<h2>Pricing</h2>
	<p>One plan for every project, free and open source.</p>
</hgroup>

Eyebrow only

<hgroup>
	<p>Step 2 of 4</p>
	<h2>Choose your plan</h2>
</hgroup>

Centered

Add text-center to the hgroup to center all its parts.

<hgroup class="text-center">
	<p>Testimonials</p>
	<h2>Loved by developers</h2>
	<p>What people say after switching to Fylgja.</p>
</hgroup>

Related: Heading Underline, Heading HR, CTA Banner.