Generally trying to improve performance.

public/components/section/blog/article/FeaturedArticleSection.jsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+
+import Section from '@components/section/Section';
+
+import Image from '@objects/image/Image';
+import ContentBox from '@objects/content/box/ContentBox';
+import { Title, Paragraph } from '@objects/typography/Typography';
+
+import Styles from './FeaturedArticleSection.scss';
+
+export default props => {
+  let { article } = props;
+
+  return (
+    <Section className="c-featured-article">
+      <Image
+        src={ require('@assets/images/photo.jpg') }
+        className="c-featured-article__image"
+      />
+      <Title className="c-featured-article__title">
+        { article.title }
+      </Title>
+
+      <Paragraph className="c-featured-article__description">
+        { article.shortDescription }
+      </Paragraph>
+    </Section>
+  );
+};

public/components/section/blog/article/FeaturedArticleSection.scss

@@ -0,0 +1,43 @@
+/*
+ *  Featured Blog Section
+ *    Section for featuring a large blog item.
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/30
+ */
+@import '~@styles/global';
+
+$c-featured-article--background: rgba(0,0,0,0.5);
+$c-featured-article--color: white;
+$c-featured-article--padding: 15px;
+
+.c-featured-article {
+  position: relative;
+
+  &__image {
+    display: block;
+    width: 100%;
+    min-height: 75vh;
+    object-fit: cover;
+  }
+
+  &__title,
+  &__description {
+    position: absolute;
+    margin: 0;
+    padding: 0.25em;
+    color: $c-featured-article--color;
+    background: $c-featured-article--background;
+  }
+
+  &__title {
+    top: 2.5em;
+    left: 0.25em;
+  }
+
+  &__description {
+    bottom: 0.5em;
+    right: 0.5em;
+    max-width: 250px;
+  }
+}

public/components/section/image/ImageSection.jsx

@@ -32,13 +32,14 @@ export default props => {
   let sectionProps = {...props};
   let imageProps = {...props};
 
-  let { image, background, children, className } = props;
+  let { image, background, children, className, imageClassName } = props;
 
-  ["children", "background", "loadable"].forEach(e => delete sectionProps[e]);
-  ["image", "full", "children", "background"].forEach(e => delete imageProps[e]);
+  ["children", "background", "loadable", "imageClassName"].forEach(e => delete sectionProps[e]);
+  ["image", "full", "children", "background", "imageClassName"].forEach(e => delete imageProps[e]);
 
   let clazz = "c-image-section";
-  image = image || <Image {...imageProps} className="c-image-section__image" />;
+  let imageClazz = `c-image-section__image ${imageClassName||""}`;
+  image = image || <Image {...imageProps} className={imageClazz} />;
 
   if(className) clazz += ` ${className}`;
   if(background) clazz += " is-background";

public/components/section/layout/SplitSection.scss

@@ -2,9 +2,6 @@
  *  Split section
  *    Simple Section that is split into multiple columns
  *
- *  Dependencies:
- *    styles/tools/_flex.scss
- *
  *  Version:
  *    1.0.0 - 2018/05/28
  */