CSS

The header bar is a plain block — it fills the width of wherever you place it, so drop it in a full-width slot above the navigation. Put is-contrast on the root so the message, CTA, and close button all pick up their contrast tokens from the container — no per-element class needed. The message is a tng-text-title element — the bar pins it to title-10, so no size modifier is needed; add tng-overflow-ellipsis so a long message truncates instead of pushing the CTA around.

<div class="tng-simple-header-bar is-contrast">
  <p class="tng-text-title tng-overflow-ellipsis">
    This is a small description
  </p>
  <a class="tng-button is-tertiary" href="#">This is a button</a>
  <button class="tng-icon-button is-ghost" aria-label="Close">
    <i class="tng-icon icon-close" aria-hidden="true"></i>
  </button>
</div>

This is a small description

This is a button

Without a CTA

The call to action is optional — drop the link and the message centres on its own. No modifier is needed; the layout adapts to whether a button is present.

<div class="tng-simple-header-bar is-contrast">
  <p class="tng-text-title tng-overflow-ellipsis">
    This is a small description
  </p>
  <button class="tng-icon-button is-ghost" aria-label="Close">
    <i class="tng-icon icon-close" aria-hidden="true"></i>
  </button>
</div>

This is a small description

Dismissal

Dismissing the bar — hiding it on click and remembering that choice for the session — is the consumer’s responsibility; the styleguide ships only the markup and the close control. Wire the close button to remove or hide the bar, persist the dismissal (for example in sessionStorage), and don’t re-show it in the same session unless the message is critical. Move focus somewhere sensible after dismissal so it is never stranded on the removed element. See the Accessibility tab for the labelling and focus contract.