Working more with the article feature layout..

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

@@ -25,8 +25,10 @@ import React from 'react';
 
 
 import BannerImageSection from '@sections/image/banner/BannerImageSection';
+import { PageBoundary } from '@components/page/Page';
 
 import Image from '@objects/image/Image';
+import Button from '@objects/input/button/Button';
 import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Paragraph } from '@objects/typography/Typography';
 
@@ -38,16 +40,23 @@ export default props => {
   return (
     <BannerImageSection
       className="c-featured-article"
-      src={ require('@assets/images/photo.jpg') } alt={ article.title }
+      src={ article.image } alt={ article.title } loadable
-      loadable
     >
+      <PageBoundary className="c-featured-article__content" full>
+
+        <ContentBox box className="c-featured-article__header">
           <Title className="c-featured-article__title">
             { article.title }
           </Title>
+        </ContentBox>
 
+        <ContentBox box className="c-featured-article__body">
           <Paragraph className="c-featured-article__description">
             { article.shortDescription }
           </Paragraph>
+        </ContentBox>
+
+      </PageBoundary>
     </BannerImageSection>
   );
 };

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

@@ -7,37 +7,72 @@
  */
 @import '~@styles/global';
 
-$c-featured-article--background: rgba(0,0,0,0.5);
+$c-featured-article--overlay: rgba(black, 0.3);
-$c-featured-article--color: white;
-$c-featured-article--padding: 15px;
 
 .c-featured-article {
   position: relative;
 
-  &__image {
+  &__header,
-    display: block;
+  &__body {
-    width: 100%;
+    position: absolute;
-    min-height: 75vh;
+    z-index: 2;
-    object-fit: cover;
+    right: 1.5em;
+    bottom: 0.5em;
   }
 
+  &__body { display: none; }
+
   &__title,
   &__description {
-    position: absolute;
+    display: inline-block;
     margin: 0;
-    padding: 0.25em;
-    color: $c-featured-article--color;
-    background: $c-featured-article--background;
   }
 
-  &__title {
+  &:after {
-    top: 2.5em;
+    //content: "";
-    left: 0.25em;
+    @include t-absolute-fill();
+    background: $c-featured-article--overlay;
+    transition: all 1s $s-animation--ease-out;
+    z-index: 1;
   }
 
-  &__description {
+  @include t-media-query($s-xsmall-up) {
-    bottom: 0.5em;
+    &__header {
-    right: 0.5em;
+      right: 5em;
-    max-width: 250px;
+      bottom: 3em;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__header {
+      left: 2em;
+      top: 7em;
+      bottom: auto;
+      right: auto;
+    }
+  }
+
+  @include t-media-query($s-medium-up) {
+    &__header {
+      left: 4em;
+      top: 8em;
+    }
+
+    &__body {
+      display: block;
+      bottom: 1.5em;
+      right: 2.5em;
+    }
+  }
+
+  @include t-media-query($s-large-up) {
+    &__header {
+      top: 11em;
+    }
+
+    &__body {
+      bottom: 5em;
+      right: 0em;
+    }
   }
 }

public/pages/blog/BlogPage.jsx

@@ -31,7 +31,9 @@ import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSectio
 const TestBlogData = {
   handle: "test-blog",
   title: "Test Blog Article",
-  shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners."
+  url: '/',
+  image: require('@assets/images/photo.jpg'),
+  shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners..."
 };
 
 export default withLanguage(props => {