feat(heading): init

src/components/header.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Img from "gatsby-image";
 import styled from "@emotion/styled";
-
+import { css } from "@emotion/react";
 const Container = styled.header`
   position: relative;
   height: 60vh;
@@ -11,18 +11,48 @@ const Container = styled.header`
 
 const Content = styled.div`
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  ${props =>
+    props.posY !== "bottom" &&
+    css`
+      top: ${props.posY === "top" ? 0 : "50%"};
+    `}
+  ${props =>
+    props.posY === "bottom" &&
+    css`
+      bottom: 0;
+    `}
+  ${props =>
+    props.posX !== "right" &&
+    css`
+      left: ${props.posX === "left" ? 0 : "50%"};
+    `}
+  ${props =>
+    props.posX === "right" &&
+    css`
+      right: 0;
+    `}
+  transform: translate(
+    ${props => (props.posX === "middle" ? "-50%" : 0)},
+    ${props => (props.posY === "middle" ? "-50%" : 0)}
+  );
   max-width: var(--theme-max-width);
+  margin: var(--spacing-y-sm) var(--spacing-x-sm);
+  padding: var(--spacing-y-sm) var(--spacing-x-sm);
   text-align: center;
 `;
 
-export default function Header({ image, children }) {
+export default function Header({
+  image,
+  position = "middle middle",
+  children
+}) {
+  const [posY, posX] = position.split(" ");
   return (
     <Container>
       {image && <Img style={{ height: "100%" }} fluid={image} />}
-      <Content>{children}</Content>
+      <Content posX={posX} posY={posY}>
+        {children}
+      </Content>
     </Container>
   );
 }