chore: Cleanup page-top-bar style conflicts (#2407)

* chore: Class name cleanup page-top-bar.

* prettier spacing fixes

* Review fixes and adds storybook

* Circleci fixes

app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="column page-top-banner">
+    <h2 class="page-sub-title">
+      {{ headerTitle }}
+    </h2>
+    <p v-if="headerContent" class="small-12 column">
+      {{ headerContent }}
+    </p>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page-top-banner {
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background-light);
+  padding: var(--space-normal) var(--space-large) 0;
+}
+</style>