diff --git a/src/app/components/Heading/Heading.stories.tsx b/src/app/components/Heading/Heading.stories.tsx
new file mode 100644
index 0000000..7e58fa7
--- /dev/null
+++ b/src/app/components/Heading/Heading.stories.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { style } from "typestyle";
+
+import { Color } from "../../constants";
+import { Heading } from "./Heading";
+
+const h4Style = style({
+ alignItems: "center",
+ color: Color.GREY
+});
+
+export default {
+ component: Heading,
+ title: "Heading"
+};
+
+// Card component should be called here instead of h1 / h2,
+export const myHeading = () => (
+
+ Create New Feature
+ You can create runs later.
+
+);
diff --git a/src/app/components/Heading/Heading.tsx b/src/app/components/Heading/Heading.tsx
new file mode 100644
index 0000000..0cdd46e
--- /dev/null
+++ b/src/app/components/Heading/Heading.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import { style } from "typestyle";
+
+import { Spacing } from "../../constants";
+
+interface IProps {
+ children: JSX.Element[] | JSX.Element;
+}
+
+
+const headingStyle = style({
+ padding: Spacing.S
+});
+
+export const Heading: FunctionComponent = (prop) => {
+ const { children } = prop;
+ return (
+
+ {children}
+
+
+ );
+};