<!-- Semmet Angular: Card — https://www.w3.org/WAI/tutorials/page-structure/headings/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %>>
  <h3 <%= camelize(name) %>Heading>Accessible components</h3>
  <p>Generate Angular components with ARIA, keyboard behavior and signals.</p>
  <a href="/docs">Read docs</a>
</<%= selector %>>
-->
<article [attr.aria-labelledby]="instanceId + '-heading'">
  <div [id]="instanceId + '-heading'">
    <ng-content select="[<%= camelize(name) %>Heading]" />
  </div>
  <ng-content />
</article>
