Cleaned more code, still untested.

public/components/section/layout/ClearSection.jsx

@@ -22,6 +22,9 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './ClearSection.scss';
+
 import Section from './../Section';
 
 export default (props) => {

public/components/section/layout/ClearSection.scss

@@ -0,0 +1,17 @@
+/*
+ *  Clear section
+ *    Simple section that is designed to clear pass the navbar (and some).
+ *    Can also be used to add spacing between sections.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/05
+ */
+@import '~@styles/global';
+
+.c-clear-section {
+  width: 100%;
+  padding-bottom: 15%;
+  position: relative;
+}

public/components/section/layout/SplitSection.jsx

@@ -22,32 +22,36 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './SplitSection.scss';
+
 import Section from './../Section';
 
 export default (props) => {
-  let aligned = "stretched";
-  if(props.align) {
-    aligned = props.align;
-  }
+  let { align, className } = props;
+  let newProps = {...props};
 
-  let clazz = "c-split-section is-" + aligned;
-  if(props.className) clazz += " " + props.className;
+  align = align || "stretched";
 
+  let clazz = "c-split-section is-" + align;
+  if(className) clazz += ` ${className}`;
 
   return (
-    <Section {...props} className={clazz} />
+    <Section {...newProps} className={clazz} />
   )
 };
 
 const Split = function(props) {
+  let { padded, className, children } = props;
+
   let clazz = "c-split-section__split";
 
-  if(props.padded) clazz += " is-padded";
-  if(props.className) clazz += " "+props.className;
+  if(padded) clazz += " is-padded";
+  if(className) clazz += ` ${className}`;
 
   return (
     <div className={clazz}>
-      { props.children }
+      { children }
     </div>
   );
 }

public/components/section/layout/SplitSection.scss

@@ -0,0 +1,38 @@
+/*
+ *  Split section
+ *    Simple Section that is split into multiple columns
+ *
+ *  Dependencies:
+ *    styles/tools/_flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/28
+ */
+@import '~@styles/global.scss';
+
+$c-split-section__split--padding: 1em;
+
+.c-split-section {
+  display: flex;
+  flex-wrap: wrap;
+
+  &.is-stretched {
+    align-items: stretch;
+  }
+
+  &.is-center {
+    align-items: center;
+  }
+
+  &__split {
+    width: 100%;
+
+    &.is-padded {
+      padding: $c-split-section__split--padding;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    flex-wrap: nowrap;
+  }
+}