<sky-action-hub
  [needsAttention]="needsAttention"
  [recentLinks]="recentLinks"
  [relatedLinks]="relatedLinks"
  [settingsLinks]="settingsLinks"
  [title]="title"
>
  <sky-action-hub-buttons>
    @for (button of buttons; track button) {
      <a
        class="sky-btn sky-btn-default sky-margin-inline-sm"
        [attr.aria-label]="button.ariaLabel"
        [href]="button.permalink.url"
      >
        {{ button.label }}
      </a>
    }
  </sky-action-hub-buttons>

  <sky-action-hub-content>
    <h2 class="sky-font-heading-2">Additional content</h2>
    <p>More content can go here as needed for the functional area.</p>
  </sky-action-hub-content>
</sky-action-hub>
