feat: add title bar layout component

src/scss/layout/_index.scss

@@ -1 +1,2 @@
 @forward "header/header";
+@forward "title-bar/title-bar";

src/scss/layout/title-bar/_title-bar.scss

@@ -0,0 +1,36 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+@use "../../base/mixins";
+
+.iati-title-bar {
+  background-color: $color-teal-90;
+
+  &__title {
+    @include mixins.page-width-container();
+    color: white;
+    font-weight: bold;
+    font-size: 2.5rem;
+    padding: 1.2em $padding-block;
+    position: relative;
+
+    &:before {
+      content: "";
+      border-left: $border-width solid $color-teal-50;
+      padding: $padding-block;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: 300px;
+      opacity: 0.2;
+    }
+  }
+}

src/scss/layout/title-bar/title-bar.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Layout/Title Bar",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const TitleBar: Story = {
+  render: () => html`
+    <div class="iati-title-bar">
+      <div class="iati-title-bar__title">Title</div>
+    </div>
+  `,
+};