Implemented a more fleshed out resources section for new Dashboard

refs: https://github.com/TryGhost/Team/issues/1556

- working implementation of all the parts of the dashboard
- now includes the what's new section again
- has dynamic, yet basic, newsletters

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -16,14 +16,35 @@
         <Dashboard::V5::Charts::Recents />
 
         {{!-- <div class="gh-dashboard5-split"> --}}
-            <Dashboard::V5::Resources::Multi />
+            {{!-- <Dashboard::V5::Resources::Multi /> --}}
             {{!-- <Dashboard::V5::Resources::Community /> --}}
         {{!-- </div>      --}}
 
+        {{!-- <Dashboard::V5::Resources::Triple /> --}}
+
+        {{!-- <div class="gh-dashboard5-split"> --}}
+            {{!-- <Dashboard::V5::Resources::Community /> --}}
+            {{!-- <Dashboard::V5::Reso÷urces::WhatsNew /> --}}
+        {{!-- </div> --}}
+
         {{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
         {{!-- <Dashboard::V5::Resources::StaffPicks /> --}}
         {{!-- <Dashboard::V5::Resources::Newsletter /> --}}
     {{/if}}
 </section>
 
+<section class="gh-dashboard5-breakout">
+    <div class="gh-dashboard5-inner">
+        <div class="gh-dashboard5-split">
+            <Dashboard::V5::Resources::Resources />
+            <Dashboard::V5::Resources::WhatsNew />
+        </div>
+        <div class="gh-dashboard5-split">
+            <Dashboard::V5::Resources::Newsletter />
+            <Dashboard::V5::Resources::StaffPicks />
+        </div>
+        <Dashboard::V5::Resources::Community />
+    </div>
+</section>
+
 <Dashboard::V5::Prototype::ControlPanel />

ghost/admin/app/components/dashboard/v5/charts/recents.hbs

@@ -28,15 +28,15 @@
                                 </LinkTo>
                             </div>
                             <div class="gh-dashboard5-list-item-sub">
-                                {{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
-                                <span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span>
+                                <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span>
+                                {{!-- <span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span> --}}
                             </div>
                             <div class="gh-dashboard5-list-item-sub">
                                 <span class="gh-dashboard5-rate-bar">
-                                    {{!-- DEMO <span class="gh-dashboard5-metric-minivalue">75%</span> --}}
-                                    {{!-- DEMO <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span> --}}
-                                    <span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
-                                    <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
+                                    <span class="gh-dashboard5-metric-minivalue">75%</span>
+                                    <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span>
+                                    {{!-- <span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span> --}}
+                                    {{!-- <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span> --}}
                                 </span>
                             </div>
                         </div>

ghost/admin/app/components/dashboard/v5/resources/community.hbs

@@ -1,15 +1,17 @@
-<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-community" {{did-insert this.load}}>
-    <article class="gh-dashboard5-box is-image">
-        <div class="gh-dashboard5-list">
-            <div class="gh-dashboard5-subtitle">
-                <h4>Ghost community</h4>
+<section class="gh-dashboard5-resource gh-dashboard5-community" {{did-insert this.load}}>
+    <article class="gh-dashboard5-resource-box">
+        <div class="gh-dashboard5-resource-title">
+            <h4>Community</h4>
         </div> 
+        <div class="gh-dashboard5-resource-body">
+            <div class="gh-dashboard5-list">
                 <div class="gh-dashboard5-list-body">
                     <p>Talk strategy.<br />Get advice.<br />Or, just hang out.</p>
                 </div>
-            <div class="gh-dashboard5-list-footer">
-                <a href="https://ghost.org/resources/community/" target="_blank" rel="noopener noreferrer">Share the journey →</a>
             </div>
         </div>
+        <div class="gh-dashboard5-resource-footer">
+            <a href="https://ghost.org/resources/community/" target="_blank" rel="noopener noreferrer">Share the journey →</a>
+        </div>
     </article>
 </section>

ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs

@@ -1,38 +1,37 @@
-<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-newsletter" {{did-insert this.load}}>
-    <article class="gh-dashboard5-box is-secondary">
-
+<section class="gh-dashboard5-resource gh-dashboard5-newsletter" {{did-insert this.load}}>
+    <article class="gh-dashboard5-resource-box">
+        <div class="gh-dashboard5-resource-title">
+            <h4>Newsletter</h4>
+        </div>
+        <div class="gh-dashboard5-resource-body">
 
             {{#if (not (or this.loading this.error))}}
-            <div class="gh-dashboard5-articles">
+                <div class="gh-dashboard5-resource-smallarticles">
                     {{#each this.newsletters as |entry|}}
-                    <div class="gh-dashboard5-article">
+                        <a class="gh-dashboard5-resource-smallarticle" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
+                            {{!-- {{#if entry.feature_image}}
+                                <div class="gh-dashboard5-newsletter-thumbnail" style={{background-image-style entry.feature_image}}></div>
+                            {{/if}} --}}
+
+                            <img class="gh-dashboard5-resource-thumbnail" src="assets/img/newsletter-1.jpg" alt="{{entry.title}}" />
+                            
+                            <div class="gh-dashboard5-resource-text">
                                 <h5>{{entry.title}}</h5>
-                    </div>
-                {{/each}}
-            </div>
-        {{/if}}
-
-        {{!-- <div class="dashboard-prototype-newsletters">
-            {{#if (not (or this.loading this.error))}}
-                {{#each this.newsletters as |entry|}}
-                    <a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
-                        <div class="gh-dashboard-box blogpost">
-                            {{#if entry.feature_image}}
-                                <div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
-                            {{/if}}
-                            <div class="content">
-                                <h2>{{entry.title}}</h2>
-                                {{#if entry.custom_excerpt}}
+                                {{!-- {{#if entry.custom_excerpt}}
                                     <p>{{entry.custom_excerpt}}</p>
                                 {{else if entry.excerpt}}
                                     <p>{{entry.excerpt}}</p>
-                                {{/if}}
-                                <div class="read-time">{{entry.reading_time}} MIN READ</div>
-                            </div>
+                                {{/if}} --}}
+                                <div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
                             </div>
                         </a>
                     {{/each}}
+                </div>
             {{/if}}
-        </div> --}}
+    
+        </div>
+        <div class="gh-dashboard5-resource-footer">
+            <a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Sign up to the newsletter &rarr;</a>
+        </div>
     </article>
 </section>

ghost/admin/app/components/dashboard/v5/resources/newsletter.js

@@ -6,7 +6,7 @@ import {tracked} from '@glimmer/tracking';
 
 const API_URL = 'https://resources.ghost.io/resources';
 const API_KEY = 'b30afc1721f5d8d021ec3450ef';
-const NEWSLETTER_COUNT = 3;
+const NEWSLETTER_COUNT = 2;
 
 export default class Newsletter extends Component {
     @tracked loading = null;

ghost/admin/app/components/dashboard/v5/resources/resources.hbs

@@ -1,20 +1,24 @@
-<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-resources">
-    <article class="gh-dashboard5-box is-faded">
-        <div class="gh-dashboard5-subtitle">
-            <h4>Resources</h4>
+<section class="gh-dashboard5-resource gh-dashboard5-resources">
+    <article class="gh-dashboard5-resource-box">
+        <div class="gh-dashboard5-resource-title">
+            <h4>Help Guides</h4>
         </div>   
-        <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
-            <div class="gh-members-help-content">
-                <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
-                <div class="text">
+        <div class="gh-dashboard5-resource-body">
+
+            <div class="gh-dashboard5-resource-bigarticle">
+                <img class="gh-dashboard5-resource-thumbnail" src="assets/img/resource-1.jpg" alt="Building your audience with subscriber signups" />
+                <div class="gh-dashboard5-resource-text">
+                    <div>
                         <h3>Building your audience with subscriber signups</h3>
                         <p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
-                    <div class="gh-btn gh-btn-link">Start building &rarr;</div>
+                        <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-btn gh-btn-link" rel="noopener noreferrer">Start building &rarr;</a>
                     </div>
                 </div>
-        </a>
-        <div class="gh-dashboard5-articles-footer">
-            <a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources &rarr;</a>
+            </div>
+
+        </div>
+        <div class="gh-dashboard5-resource-footer">
+            <a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Get more help &rarr;</a>
         </div>
     </article>
 </section>

ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs

@@ -1,17 +1,17 @@
-{{!-- <section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-staff-picks" {{did-insert this.load}}>
-    <article class="gh-dashboard5-box is-secondary"> --}}
-        <div class="gh-dashboard5-staff-picks gh-dashboard5-list" {{did-insert this.load}}>
-            {{#if (not (or this.loading this.error))}}
-                <div class="gh-dashboard5-list-header">
-                    <Dashboard::v5::Parts::Metric
-                        @label="Staff picks" />   
+<section class="gh-dashboard5-resource gh-dashboard5-staff-picks" {{did-insert this.load}}>
+    <article class="gh-dashboard5-resource-box">
+        <div class="gh-dashboard5-resource-title">
+            <h4>Staff Picks</h4>
         </div> 
+        <div class="gh-dashboard5-resource-body">
+            <div class="gh-dashboard5-list" {{did-insert this.load}}>
+                {{#if (not (or this.loading this.error))}}
                     <div class="gh-dashboard5-list-body">
                         {{#each this.staffPicks as |entry|}}
                             <div class="gh-dashboard5-list-item">
                                 <a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
                                     <span class="gh-dashboard5-list-link">{{entry.title}}</span>
-                                <div class="gh-dashboard5-list-author">{{entry.creator}}</div>
+                                    <div class="gh-dashboard5-resource-secondary">{{entry.creator}}</div>
                                 </a>
                             </div>
                         {{else}}
@@ -21,10 +21,11 @@
                             </div>
                         {{/each}}
                     </div>
-                <div class="gh-dashboard5-list-footer">
-                    <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">See all picks →</a>
-                </div>
                 {{/if}}
             </div>
-    {{!-- </article>
-</section> --}}
+        </div>
+        <div class="gh-dashboard5-resource-footer">
+            <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow on Twitter →</a>
+        </div>
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/triple.hbs

@@ -0,0 +1,51 @@
+<section class="gh-dashboard5-section gh-dashboard5-triple">
+
+        <div class="gh-dashboard5-tabs">
+            <button type="button" class="gh-dashboard5-tab {{if this.postsTabSelected 'is-selected'}}" {{on "click" this.changeTabToPosts}}>
+                <Dashboard::v5::Parts::Metric
+                    @label="Recent posts" /> 
+            </button>
+            {{#if this.areMembersEnabled}}
+                <button type="button" class="gh-dashboard5-tab {{if this.activityTabSelected 'is-selected'}}" {{on "click" this.changeTabToActivity}}>
+                    <Dashboard::v5::Parts::Metric
+                        @label="Member activity" /> 
+                </button>          
+            {{/if}}
+        </div>
+
+        <div class="gh-dashboard5-articles">
+            <a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard5-article-content">
+                    <div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
+                    <div class="gh-dashboard5-article-text">
+                        <h3>How to create offers in Ghost</h3>
+                        <p>Find out how to create and promote offers to increase your subscriptions.</p>
+                    </div>
+                </div>
+                <div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
+            </a>
+
+            <a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard5-article-content">
+                    <div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
+                    <div class="gh-dashboard5-article-text">
+                        <h3>How to create offers in Ghost</h3>
+                        <p>Find out how to create and promote offers to increase your subscriptions.</p>
+                    </div>
+                </div>
+                <div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
+            </a>
+
+            <a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard5-article-content">
+                    <div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
+                    <div class="gh-dashboard5-article-text">
+                        <h3>How to create offers in Ghost</h3>
+                        <p>Find out how to create and promote offers to increase your subscriptions.</p>
+                    </div>
+                </div>
+                <div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
+            </a>
+        </div>
+
+</section>

ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs

@@ -1,28 +1,29 @@
-<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-whats-new" {{did-insert this.load}}>
-    <article class="gh-dashboard5-box">
+<section class="gh-dashboard5-resource gh-dashboard5-whats-new" {{did-insert this.load}}>
+    <article class="gh-dashboard5-resource-box">
+        <div class="gh-dashboard5-resource-title">
+            <h4>What's New</h4>
+        </div>
+        <div class="gh-dashboard5-resource-body">
             {{#if (not (or this.loading this.error))}}
                 <div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
-                <div class="gh-dashboard5-list-header">
-                    <Dashboard::v5::Parts::Metric
-                        @label="What's new" />   
-                </div>
                     <div class="gh-dashboard5-list-body">
                         {{#each this.entries as |entry|}}
                             <div class="gh-dashboard5-list-item">
                                 <LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
                                     <span class="gh-dashboard5-list-link">{{entry.title}}</span>
-                                <div class="gh-dashboard5-list-date">{{moment-format entry.published_at "D MMM YYYY"}}</div>
-                                {{#if entry.custom_excerpt}}
+                                    <div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
+                                    {{!-- {{#if entry.custom_excerpt}}
                                         <p>{{entry.custom_excerpt}}</p>
-                                {{/if}}
+                                    {{/if}} --}}
                                 </LinkTo>    
                             </div>
                         {{/each}}
                     </div>
-                <div class="gh-dashboard5-list-footer">
-                    <LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more updates &rarr;</LinkTo>
-                </div>
                 </div>
             {{/if}}
+        </div>
+        <div class="gh-dashboard5-resource-footer">
+            <LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more features &rarr;</LinkTo>
+        </div>
     </article>
 </section>

ghost/admin/app/styles/app-dark.css

@@ -1130,3 +1130,11 @@ kbd {
 .gh-dashboard5 .gh-dashboard5-column {
     border-color: #2b2d31;
 }
+
+.gh-dashboard5 .gh-dashboard5-breakout {
+    background: #111213;
+}
+
+.gh-dashboard5-community .gh-dashboard5-list-footer {
+    border-color: transparent;
+}

ghost/admin/app/styles/layouts/dashboard-v5.css

@@ -62,6 +62,10 @@ Dashboard v5 Prototype */
 Dashboard v5 Layout */
 
 .gh-dashboard5 {
+
+}
+
+.gh-dashboard5-layout {
     max-width: 1230px;
     margin: 0 auto;
 }
@@ -146,7 +150,7 @@ Dashboard v5 Layout */
     font-size: 1.2rem;
     font-weight: 600;
     text-transform: uppercase;
-    color: var(--white);
+    color: var(--black);
     margin: 0;
     padding: 0;
     transition: color .3s;
@@ -161,6 +165,7 @@ Dashboard v5 Layout */
     flex-direction: column;
     position: relative;
     align-items: stretch;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.01);
 }
 
 .gh-dashboard5-box.is-secondary {
@@ -172,16 +177,6 @@ Dashboard v5 Layout */
     background: linear-gradient(310deg, rgba(249,249,249,1) 0%, rgba(254,254,254,1) 100%);
 }
 
-.gh-dashboard5-box.is-image {
-    background: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(img/abstract-2.jpg);
-    color: var(--white);
-    padding-top: 32px;
-}
-
 .gh-dashboard5-columns {
     flex: 1;
     padding: 0;
@@ -977,14 +972,30 @@ Dashboard v5 Section Resources */
     padding: 24px;
 }
 
-.gh-dashboard5-resources .gh-dashboard5-subtitle h4 {
-    color: var(--darkgrey);
+.gh-dashboard5-resources .gh-dashboare5-article-content {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    font-size: 1.4rem;
+    padding: 24px 0;
 }
 
-.gh-dashboard5-resources .gh-dashboard5-box {
-    padding-top: 32px;
+.gh-dashboard5-resources .gh-dashboare5-article-thumbnail {
+    flex: 2;
+    height: auto;
+    overflow: hidden;
+    border-radius: 3px;
 }
 
+.gh-dashboard5-resources .gh-dashboare5-article-text {
+    flex: 3;
+    padding: 0 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+}
 
 
 /* --------------------------------- 
@@ -1056,8 +1067,8 @@ Dashboard v5 Section Staff Picks */
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-list-item {
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding-top: 8px;
+    padding-bottom: 8px;
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-list-item:first-child {
@@ -1072,12 +1083,11 @@ Dashboard v5 Section Staff Picks */
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    font-size: 1.65rem;
     font-weight: 600;
-    font-size: 1.4rem;
     line-height: 1.4em;
     margin-bottom: 8px;
     color: var(--black);
-    padding: 0;
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-list-body {
@@ -1087,7 +1097,7 @@ Dashboard v5 Section Staff Picks */
     justify-content: space-between;
     color: #7c8b9a;
     font-size: 1.4rem;
-    padding: 16px 64px 16px 0;
+    padding: 8px 24px 16px 0;
     transition: all .3s ease-in-out;
 }
 
@@ -1099,23 +1109,18 @@ Dashboard v5 Section Latest Newsletters */
     position: relative;
 }
 
-.gh-dashboard5-newsletter .gh-dashboard5-articles {
+.gh-dashboard5-newsletter .gh-dashboard5-newsletter-items {
     display: grid;
     grid-gap: 24px;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     flex: 1;
 }
 
-.gh-dashboard5-newsletter .gh-dashboard5-article {
-    background: var(--purple);
-    border-radius: 6px;
-    padding: 24px;
-}
+.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item {}
 
-.gh-dashboard5-newsletter .gh-dashboard5-article h5 {
-    color: var(--white);
-    font-size: 1.2rem;
+.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item h5 {
+    font-size: 1.4rem;
     padding: 0 32px 0 0;
 }
 
@@ -1127,8 +1132,14 @@ Dashboard v5 Section Community */
     position: relative;
 }
 
-.gh-dashboard5-community .gh-dashboard5-list-body {
-    justify-content: flex-start;
+.gh-dashboard5-community .gh-dashboard5-resource-box {
+    background: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(img/community-background.jpg);
+    color: var(--white);
+    padding-top: 32px;
 }
 
 .gh-dashboard5-community .gh-dashboard5-list-body p {
@@ -1137,15 +1148,19 @@ Dashboard v5 Section Community */
     line-height: 1.3em;
     padding: 0 64px 0 0;
     transition: color .3s;
+    color: #fff;
 }
 
-.gh-dashboard5-community .gh-dashboard5-list-footer {
+.gh-dashboard5-community .gh-dashboard5-resource-footer {
     border-color: transparent;
 }
 
-.gh-dashboard5-community .gh-dashboard5-list-footer a {
-    color: var(--white);
-    font-weight: 800;
+.gh-dashboard5-community .gh-dashboard5-resource-footer a {
+    color: #fff;
+}
+
+.gh-dashboard5-community .gh-dashboard5-resource-title h4 {
+    color: #fff;
 }
 
 
@@ -1202,3 +1217,168 @@ Dashboard v5 Misc */
     top: 0;
     bottom: 0;
 }
+
+
+
+
+.gh-dashboard5-triple {
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-dashboard5-articles {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.gh-dashboard5-article {
+
+}
+
+
+
+
+
+
+
+
+.gh-dashboard5-breakout {
+    width: calc(100% + 48px + 48px);
+    background: #fcfcfc;
+    padding: 24px 0 50vh;
+    margin-left: -48px;
+    margin-right: -48px;
+}
+
+.gh-dashboard5-inner {
+    max-width: 1230px;
+    margin: 0 auto;
+}
+
+.gh-dashboard5-subhead {
+    padding: 0 24px 24px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Resources */
+
+.gh-dashboard5-resource {
+    display: flex;
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-resource-main {
+    margin-right: 8px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-resource-aside {
+    margin-left: -8px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-resource-box {
+    flex: 1;
+    border: 1px solid var(--whitegrey);
+    padding: 28px 24px 24px;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: stretch;
+    background: var(--white);
+    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.02);
+}
+
+.gh-dashboard5-resource-title {
+    display: flex;
+    flex-direction: row;
+    margin: 0 0 20px;
+}
+
+.gh-dashboard5-resource-title h4 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--black);
+    margin: 0;
+    padding: 0;
+    transition: color .3s;
+}
+
+.gh-dashboard5-resource-body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.gh-dashboard5-resource-footer {
+    border-top: 1px solid var(--whitegrey);
+    padding: 20px 0 0;
+}
+
+.gh-dashboard5-resource-footer a {
+    font-weight: 600;
+}
+
+.gh-dashboard5-resource-thumbnail {
+    border-radius: 4px;
+    width: 100%;
+    height: auto;
+}
+
+.gh-dashboard5-resource-bigarticle {
+    display: flex;
+    flex-direction: row;
+    padding: 0 0 24px;
+}
+
+.gh-dashboard5-resource-bigarticle .gh-dashboard5-resource-thumbnail {
+    width: 40%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.gh-dashboard5-resource-smallarticles {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.gh-dashboard5-resource-smallarticle {
+    flex: 1;
+    margin: 0 24px 0 0;
+    padding: 0 0 32px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+}
+
+.gh-dashboard5-resource-smallarticle .gh-dashboard5-resource-thumbnail {
+    width: 100%;
+    margin: 0 0 12px;
+}
+
+.gh-dashboard5-resource-smallarticle:last-child {
+    margin-right: 0;
+}
+
+.gh-dashboard5-resource-bigarticle .gh-dashboard5-resource-text {
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 24px;
+}
+
+.gh-dashboard5-resource-secondary {
+    font-size: 1.3rem;
+    line-height: 1.5em;
+    font-weight: 600;
+    color: var(--midlightgrey);
+    padding: 3px 0 0 0;
+    white-space: nowrap;
+}

ghost/admin/app/templates/dashboard.hbs

@@ -1,11 +1,13 @@
 <section class="gh-canvas" {{scroll-top}}>
     {{#if (feature "dashboardV5")}}
         <div class="gh-dashboard5">
+            <div class="gh-dashboard5-inner">
                 <GhCanvasHeader class="gh-canvas-header">
                     <h2 class="gh-canvas-title" data-test-screen-title>
                         Dashboard
                     </h2>
                 </GhCanvasHeader>
+            </div>
             <Dashboard::DashboardV5 />
         </div>
     {{else}}