Add hgroup example

[oiahoon]

Summary

• add an <hgroup> example to the kitchen sink source and generated site template
• add the matching Storybook content-sectioning story
• link the new section from the kitchen sink navigation

Closes #332.

Verification

• npm test
• Eleventy production build
• Storybook production build
• desktop and mobile rendering checks, including the new navigation anchor

[vercel]

@oiahoon is attempting to deploy a commit to the Evgeny Orekhov's projects Team on Vercel.

A member of the Team first needs to authorize it.

[EvgenyOrekhov]

Nice, thanks! I was thinking to also add some styling for <hgroup> as part of #332. Can you suggest some designs?

[oiahoon]

Given the stylesheet's minimal, native-element approach, I'd start with a tight typographic group rather than a card or border:

• hgroup > :where(h1, h2, h3, h4, h5, h6) { margin-bottom: 0.25rem; }
• hgroup > :where(h1, h2, h3, h4, h5, h6) + p { margin-top: 0; }

This preserves the existing heading hierarchy and only makes the heading/subtitle relationship visible. A stronger subtitle size or muted color would be more opinionated, and there isn't currently a secondary-text color token. If this direction fits what you had in mind, I can add it with Storybook coverage across heading levels and light/dark modes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holidaycss	Ready	Preview, Comment	Jul 15, 2026 8:49pm

[EvgenyOrekhov]

@oiahoon I'm open to making it a bit more opinionated. Feel free to change size/color, and feel free to add a secondary-text-color token.

[EvgenyOrekhov]

Also, the spec allows having multiple <p> tags. Can you add one more example?

    <hgroup>
      <h2>H2 example</h2>
      <p>Supporting text</p>
      <p>Another paragraph</p>
    </hgroup>