I have a component that has an eyebrow and below the eyebrow there is a larger heading. The heading is larger and more significant to the overall theme of the component. The eyebrow is more supplementary.

Would it be allowable from an accessibility perspective to use an h3 or h4 for the eyebrow and an h2 for the heading text beneath it, even though the eyebrow is technically above the header?

For example,

Eyebrow
Heading Element