The headings looked right in review, wrong in production
I shipped a Surging Sparks chase guide yesterday and the heading hierarchy was quietly broken on the live site. The MDX components rendered fine in the local review surface, but the public route wraps article content in an analytics wrapper. That extra layer meant my BlogArticleContent container selector never matched the actual headings in production. H2s lost their spacing, H3s lost their scale, and the auto-generated heading anchors inherited ordinary underlined link styling instead of reading as navigation.
Shared H2 and H3 components fix it at the source
The fix was to stop relying on a parent container descendant selector and instead map MDX headings to dedicated components. Now h2 and h3 in the component map are explicit React components with their own responsive classes, so the typography applies wherever the article renders:
const BlogH2 = ({ className, ...props }) => (
<h2
{...props}
className={cn(className, "mt-16 scroll-mt-28 text-balance text-2xl font-semibold leading-tight sm:mt-20 sm:text-3xl")}
/>
);The hash-link anchors inside headings also got their own class branch. A #section link now inherits text color and drops the underline, so it reads as part of the heading rather than a styled body link. Both desktop and the 390px mobile view now show clean H2 and H3 hierarchy without divider decoration or overflow.
The guide itself went live with contextual card links
The Surging Sparks chase guide is the first article using the new heading components in production. It targets a chase-card query Aneury validated earlier this week and links the first meaningful mention of each featured card directly to its BinderDex card page. The article also got a BreadcrumbList schema so blog posts show breadcrumb navigation in search results. Three tests lock the heading component contract so this particular drift cannot sneak back.