Heading Group

A heading with a subtitle, using the native <hgroup> element.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/heading-group.css" />

Default

Put a heading and a <p> inside <hgroup>. The paragraph gets a muted color and a small gap below the heading.

Set a new milestone

Define your target and we'll help you pace your savings.

<hgroup>
  <h3>Set a new milestone</h3>
  <p>Define your target and we'll help you pace your savings.</p>
</hgroup>

In a card

Heading groups work anywhere, not only inside .prose. Use one as the title of a card or a form.

Team

Invite people to collaborate on this project.

<article class="card">
  <hgroup>
    <h3>Team</h3>
    <p>Invite people to collaborate on this project.</p>
  </hgroup>
</article>

In prose

Inside .prose, a heading group also gets space below it, to separate it from the text that follows.

Release notes

Version 2.0

This release adds dark mode and a new color system.

<div class="prose">
  <hgroup>
    <h2>Release notes</h2>
    <p>Version 2.0</p>
  </hgroup>
  <p>This release adds dark mode and a new color system.</p>
</div>