Heading
Heading group controls the heading level of headings nested within it, like H1, H2, H3.
Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.
Was this section helpful?
Basic HeadingGroup
import {
render,
HeadingGroup,
Heading,
} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <Extension />);
function Extension() {
return (
<>
<Heading>Heading <h1></Heading>
<HeadingGroup>
<Heading>Heading <h2></Heading>
<HeadingGroup>
<Heading>Heading <h3></Heading>
</HeadingGroup>
</HeadingGroup>
</>
);
}
examples
Basic HeadingGroup
React
import { render, HeadingGroup, Heading, } from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::Render', () => <Extension />); function Extension() { return ( <> <Heading>Heading <h1></Heading> <HeadingGroup> <Heading>Heading <h2></Heading> <HeadingGroup> <Heading>Heading <h3></Heading> </HeadingGroup> </HeadingGroup> </> ); }JS
import { extend, HeadingGroup, Heading, View, } from '@shopify/checkout-ui-extensions'; extend('Checkout::Dynamic::Render', (root) => { const headingGroup = root.createComponent(View, undefined, [ root.createComponent(Heading, undefined, 'Heading <h1>'), root.createComponent(HeadingGroup, undefined, [ root.createComponent(Heading, undefined, 'Heading <h2>'), root.createComponent(HeadingGroup, undefined, [ root.createComponent(Heading, undefined, 'Heading <h3>'), ]), ]), ]); root.appendChild(headingGroup); });
Preview
Anchor to best-practicesBest Practices
- Use this component to create a content hierarchy within the document outline.
Was this section helpful?
