comments mock

src/components/containers/Padder/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import classNames = require("classnames");
+
+type IProps = React.HTMLAttributes<HTMLDivElement> &  {
+  padding?: number;
+  vertical?: boolean;
+  horizontal?: boolean;
+}
+
+const Padder: FC<IProps> = ({
+  padding,
+  children,
+  className,
+  style = {},
+  vertical,
+  horizontal,
+  ...props
+}) => (
+    <div
+      className={classNames(styles.padder, className, { vertical, horizontal })}
+      style={padding ? { ...style, padding } : style}
+      {...props}
+    >
+      {children}
+    </div>
+);
+
+export { Padder };

src/components/containers/Padder/styles.scss

@@ -0,0 +1,13 @@
+.padder {
+  padding: $gap;
+
+  &:global(.horizontal) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &:global(.vertical) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}