Banner

A banner will attach itself to the closest positioned (css position any value other than the default static) ancestor element.

Since it will occupy 30px of the top of the box, it can be a good idea to apply a padding-top: 30px to the container, and then a separate box with .bf-padding around your content.

<div
  className="bfc-base-3-bg"
  style={{
    width: 200,
    position: "relative",
    paddingTop: 30,
  }}
>
  <Banner>Test</Banner>
  <div className="bf-padding">A box with a banner attached</div>
</div>
<div
  className="bfc-base-3-bg"
  style={{
    width: 200,
    position: "relative",
    paddingTop: 30,
  }}
>
  <Banner>Test</Banner>
  <div className="bf-padding">A box with a banner attached</div>
</div>

Guess what align='left' does? =)

<div
  className="bfc-base-3-bg"
  style={{
    width: 200,
    position: "relative",
    paddingTop: 30,
  }}
>
  <Banner align="left">Test</Banner>
  <div className="bf-padding">A box with a banner attached</div>
</div>
<div
  className="bfc-base-3-bg"
  style={{
    width: 200,
    position: "relative",
    paddingTop: 30,
  }}
>
  <Banner align="left">Test</Banner>
  <div className="bf-padding">A box with a banner attached</div>
</div>

For a clickable banner, add an onClick - this will make the banner render as a <button>.

import { faXmark } from "@fortawesome/free-solid-svg-icons";
import Icon from "@intility/bifrost-react/Icon";
import Banner from "@intility/bifrost-react/Banner";

export default function () {
  return (
    <div
      className="bfc-base-3-bg"
      style={{
        width: 200,
        position: "relative",
        paddingTop: 30,
      }}
    >
      <Banner onClick={() => {}}>
        <Icon icon={faXmark} />
      </Banner>
      <div className="bf-padding">A box with a banner attached</div>
    </div>
  );
}